当出现粘性导航时页面跳转
当出现粘性导航时页面跳转
提问于 2017-03-07 16:18:23
一旦你滚动到第一节(关于系统性治疗)，我正试图为页面添加一个粘性的导航。
在这里查看网页
但是，一旦出现粘性导航，页面就会跳转。当您单击导航栏中的“系统心理治疗”时，这也会影响页面所在的位置。而不是降落在顶部的部分，它涵盖标题和前几句话。但是，只有在页面顶部单击时才会发生这种情况。
我试过用路标：
$('.js--section-about-st').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});和jQuery：
$(window).scroll(function() {
if ($(this).scrollTop() > 400){
$('nav').addClass('sticky');
}
else{
$('nav').removeClass('sticky');
}当导航条变得粘稠时，导航条的大小会减小。我读过，这会导致页面跳转，所以我试着保持相同的大小，但它仍然跳。
有人能帮我找出我哪里出错了吗？
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-07 16:26:56
当您创建一个元素position: fixed;时，它将从页面的流中删除，这意味着它不会影响其他元素。它曾经占据的任何高度都是无效的。下面是这种行为的一个例子。
非粘性导航是105px，所以当它变得粘稠时，导航后的所有元素都会向上移动105px以占据这个空间。考虑将与padding-top相同的padding-top应用于<body>，以弥补现在缺少的导航栏。下面是上面的相同示例，但是现在修复已经就位。
$(window).scroll(function() {
if ($(this).scrollTop() > 400){
$('nav').addClass('sticky');
$('body').css('padding-top', '105px'); //Height of non-stick nav
}
else{
$('nav').removeClass('sticky');
$('body').css('padding-top', '');
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42653187
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号