android studio 顶部导航栏_锚点定位被顶部固定导航栏遮住的解决方案_weixin_39678426的博客

1. 锚点定位机制

如果没有滚动条，锚点失效。
如果有滚动条，滚动条滚动到地址 hash （地址 # 号后面的内容）对应的锚点元素 padding-box 上边缘位置。

2. 解决方案

示例源码
示例在线预览

（1）padding+margin

padding影响锚点元素的定位，margin不影响锚点元素的定位。所以使用padding调整锚点元素跳转后的位置，使用margin抵消padding对布局的影响。

<h3 class="heading first" id="first">
 1.出现的时间、地点不同
.first {    
  padding-top: 60px;/* 60px是导航栏高度 */    
  margin-top: -60px; 
  <h3 class="heading">
 <span id="second" class="title_placeholder">
 2. require/exports 是运行时动态加载，import/export 是静态编译
 </span>
.title_placeholder { 
   padding-top: 60px;
 （3）暗锚点
 在需要定位的元素上方加入不影响布局的空白锚点元素。
 因为锚点跳转后的位置会落在元素的padding-box上边缘，设置 height影响锚点位置，设置margin-top抵消暗锚对布局对影响。
  <div class="dark_anchor" id="third"></div>
<h3 class="heading">
 3. require/exports 输出的是一个值的拷贝，import/export 模块输出的是值的引用
.dark_anchor {    height: 60px;    margin-top: -60px;}
                                    很多网站都有一个固定在上方的导航栏，方便用户搜索和跳转到其他页面。
同时为了方便用户浏览长文档，都会加上目录，点击段落标题跳转到段落所在的位置，
如图所示：
如果使用锚点实现目录的跳转会遇到 fixed 导航栏遮住了标题的问题。
1. 锚点定位机制
如果没有滚动条，锚点失效。
如果有滚动条，滚动条滚动到地址 hash （地址 # 号后面的内容）对应的锚点元素padding-box上边缘位置。
2. 解决方案
示例在线预览
（1）padding+margin
padding影响锚点元素的定位，margin不影响锚点元素的定位。所以使用padding调整锚点元素跳转后的位置，使
&lt;span id="product_video" style="margin-top: -102px;padding-top: 102px;"&gt;&lt;/span&gt;
margin-top: 导航栏高度的负值;
padding-top: 导航栏高度的正值;
                                浏览器打开
                                    html样式如下：	
			&lt;li class="list"&gt;&lt;a href="javascript:void(0)" onclick="locateAt('nte')" "&gt;积分落户&lt;/a&gt;&lt;/li&gt;
			&lt;li class="list"&gt;&lt;a href=&quo
                                浏览器打开
                                    由于华为和魅族手机系统自带的有底部导航栏，会造成一些布局被遮挡。 
之前用的eclipse没有发现被遮挡的情况，最近公司要求使用android studio，在做分享的时候发现，弹出的分享下面的文字被遮挡了。于是上网查找解决办法，有的说是在布局里面的跟布局加入android:fitsSystemWindows=”true”即可解决，可是我加入以后还是未能解决。 
未解决之前的图片 
                                浏览器打开
类选择器，然后 把他的类名写上，给他写样式。也可以在源代码里写，不过要用style包裹住。样式是一个固定定位，然后向下百分之8，向右百分之8，（使用定位后，你向左，他图片就会从左边开始数，比如，我想在是向下和向右，那他就会出现在右下角）百分之8不是像素，而是页面的百分之8，越小就越靠近你设置的方向。后面的是层级关系，...
                                浏览器打开
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-a...
                                浏览器打开
                                    效果图：顶部导航：首先引入三个：<在body里面做：<!--navbar是nav导航标签的一个基类必须添加，navbar-default是对导航条样式的添加-->
注意：1.导航头部距离顶部的距离   style=“margin-top:”2.导航头部图片的大小  height=3.ul列表文字的大小 style="font-size:" 4.ul列表距离顶部的距离style=“...
                                浏览器打开