8年前 (2017-09-04)  Javascripts |   抢沙发  1197 
文章评分 2 次,平均分 4.0
导语:本人在做HAMdb数据库的时候也发现顶部affix导航之后,点击锚点会使得其导航被fixed,导致被target的正文会以窗口顶部对其,导致如图所示的遮挡。本人尝试多种方式,最后综合完美解决这一问题。



如大家在 segmentfault 当前版本所见到的,点击锚点链接后,展示的内容会因为 header 区的浮动而被遮盖。真正完美解决锚点偏移量问题,Bootstrap的Affix顶部被遮挡问题。

本人在做HAMdb数据库的时候也发现顶部affix导航之后,点击锚点会使得其导航被fixed,导致被target的正文会以窗口顶部对其,导致如图所示的遮挡。

查阅了许多资料,并且做了很多尝试都失败了。总体来说:

  1. 在<content>前面再加一个<a class="target-fix"></a>作为暗锚,将这个锚点进行偏移:
  2. 对于支持CSS3的:target声明可以这样:
  3. jQuery去调整scroll解决:
  4. 或者jquery的jquery-hashchange,绑定window.onhashchange事件:

本人在尝试上述方法后,基本没解决。可能是由于其他冲突或者什么原因。最终决定自己来实现:

首先,贴出<a>部分:

然后,贴出<content>部分:

最后,贴出javascript部分:

第一部分是启动affix的代码,米有什么好解释。第二段第一句找到当前content所在位置,并且下移50px;第二句,在affix执行后延迟一段时间,然后将整个content下移。这个延迟主要是为了避免屏幕在两种位置瞬间闪烁。

这种效果还是在一定程度上更好,前几种要么要引入新的js,导致冲突,要么不兼容。个人感觉自己的方法比较完美达到想要效果。

 

本文原始地址:https://www.ifyoung.net/javascript-affix.html

本站所有文章,若标明本站原创,转载请注明出处来自https://www.ifyoung.net/

关于

发表评论

表情 格式

暂无评论

登录

忘记密码 ?

切换登录

注册

扫一扫二维码分享