我有一些代码如下: https://jsfiddle.net/k77986kL/
想法是有一个标题(包含图像、文本和各种其他内容),下面是一个导航菜单。我的目标是在页面首次加载时让导航菜单在标题下方开始,但是当用户向下滚动并且菜单到达屏幕顶部时,它会一直停留在那里直到用户向上滚动
正如您从 fiddle 中看到的那样,我得到的行为是正确的,但有一点点跳跃。当你向下滚动到导航菜单到达顶部的那一刻,内容突然跳了下来。而当你向上滚动页面时,内容又会跳转。它跳得不多,但跳得足够明显,尤其是在快速滚动时
查看我的 jquery,我看不出是什么导致了这个问题:
$(function () {
var nav = $('nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function () {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
width: nav.width()
});
isFixed = true;
} else if (!shouldBeFixed && isFixed) {
nav.css({
position: 'relative'
});
isFixed = false;
}
});
}
);
这一切都是从我的主要元素文件中提取的,因此其中可能有一些演示本身所需的 css 元素,但我保留了这些选择器的 CSS 以防万一它们可能导致此问题
最佳答案
问题是,当您设置 position: fixed
时,nav
不在页面流中,它占用的空间是空闲的。因此内容会上升以填充该空间。当 nav
变为 position: relative
时,情况正好相反。
为了解决这个问题,我简单地为 header
元素设置了一个 margin-top
来填充 nav
占用的空间,然后我删除了在不需要时使用它。
完整代码如下:
$(function () {
var nav = $('nav');
var header = $('header'); // get header element
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function () {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
width: nav.width()
});
header.css('marginTop', nav.height()); // set margin-top
isFixed = true;
} else if (!shouldBeFixed && isFixed) {
nav.css({
position: 'relative'
});
header.css('marginTop', 0); // remove margin-top
isFixed = false;
}
});
}
);
关于javascript - jquery css - 固定菜单跳转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31158216/