开发者社区> 雨客> 正文

解决固定导航时锚点偏移问题

简介:
+关注继续查看

最近Bootstrap修改了博客主题,使其支持响应式布局,并且将导航菜单固定住,不随滚到条滚动,这样做带来的影响是CategoriesTags页面点击某一个分类或者标签链接时,锚点定位必然定位于页面顶部,这样一来就会被固定住的导航遮挡,例如,我在Categories页面,点击hbase分类,锚点定位最后如下图:

网上查找了一些资料,找到一篇文章点击锚点让定位偏移顶部,这篇文章提到几种解决办法:

第一种,使用css将锚点偏移:

<a class="target-fix" ></a>
<artivle>主体内容...</article>

css如下:

.target-fix {
    position: relative;
    top: -44px; /*偏移值*/
    display: block;
    height: 0;
    overflow: hidden;
}

对于现代浏览器如果支持css的:target声明,可以这么设置:

article.a-post:target{
    padding-top:44px;
}

第二种,使用JavaScript去调整scroll值:

$(function(){
  if(location.hash){
     var target = $(location.hash);
     if(target.length==1){
         var top = target.offset().top-44;
         if(top > 0){
             $('html,body').animate({scrollTop:top}, 1000);
         }
     }
  }
});

注意:上面代码中的44为固定的导航所占的像素高度,根据你的实际情况做修改。

当然,你也可以使用jquery-hashchange插件去实现上面的功能,但是需要注意jquery-hashchange是否支持你使用的JQuery版本。

$(function(){
        /* 绑定事件*/
        $(window).hashchange(function(){
            var target = $(location.hash);
            if(target.length==1){
                 var top = target.offset().top-44;
                 if(top > 0){
                     $('html,body').animate({scrollTop:top}, 1000);
                 }
             } 
        });
        /* 触发事件 */
        $(window).hashchange();
});

分析上面两种方法,我最后使用的是第二种方法,在core.js文件中添加如下代码:

$('a[href^=#][href!=#]').click(function() {
  var target = document.getElementById(this.hash.slice(1));
  if (!target) return;
  var targetOffset = $(target).offset().top-70;
  $('html,body').animate({scrollTop: targetOffset}, 400);
  return false;
});

这里,我是在链接上监听单击事件,获取目标对象的偏移,上面减去70是因为下面的css代码:

#wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto -60px;
  padding: 70px 0 60px;
}

刷新页面,再次点击目录或者标签,就可以正常的跳到锚点位置了。你可以点击分类hbase 试试效果。

但是,还没有结束。如果是从其他页面,例如,在文章页面点击分类或标签时,页面却不会跳转到正确的锚点位置。这是因为上面的javascript代码只是考虑了当前页面,是在当前页面获取目标的偏离,而没有考虑在另外一个页面单击链接跳到目标页面的锚点的情况。

所以,我们需要修改代码:

var handler=function(hash){
    var target = document.getElementById(hash.slice(1));
    if (!target) return;
    var targetOffset = $(target).offset().top-70;
    $('html,body').animate({scrollTop: targetOffset}, 400);
}

$('a[href^=#][href!=#]').click(function(){
    handler(this.hash)
});

if(location.hash){ handler(location.hash) }

这样,就大功告成了,希望这篇文章对你有所帮助。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
布局之悬浮显示更多文本并增加箭头指示效果
布局之悬浮显示更多文本并增加箭头指示效果
23 0
利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果
利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果
61 0
百度地图 - 自定义划分区域并获取区域内的坐标点
最近在做一个大数据人员分布的系统,需要能够在地图上自定义划分区域,并能够获取该区域内的坐标点信息,也是搞了很久才做出来,特此记录一下
161 0
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
57 0
左边固定宽,右边自适应的6种方法
左边固定宽,右边自适应的6种方法
46 0
CSS样式更改——框模型、定位、浮动、溢出
CSS样式更改——框模型、定位、浮动、溢出
63 0
html 锚点定位偏移 外边距增加
html 锚点定位偏移 外边距增加
70 0
+关注
雨客
微博@JavaChen,这里的所有博客文章来自http://blog.javachen.com/。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载