Javascript 固定导航菜单后滚动
我正在尝试创建一个粘性导航菜单,该菜单将定位在横幅的正下方,当您向下滚动且无法再看到横幅时,导航菜单将固定在浏览器的顶部。以下是我目前掌握的情况: CSS是直截了当的,问题可能与我的JS有关:Javascript 固定导航菜单后滚动,javascript,jquery,Javascript,Jquery,我正在尝试创建一个粘性导航菜单,该菜单将定位在横幅的正下方,当您向下滚动且无法再看到横幅时,导航菜单将固定在浏览器的顶部。以下是我目前掌握的情况: CSS是直截了当的,问题可能与我的JS有关: $(document).ready(function() { var s = $(".navMenu"); var pos = s.position(); $(window).scroll(function() { var windowpos = $(windo
$(document).ready(function() {
var s = $(".navMenu");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixedTop"); }
else {
s.removeClass("fixedTop");
}
});
});
虽然它在Firefox中的工作方式与您所希望的完全相同,但我可以理解为什么它在Chrome和Safari中的表现不同(只要您向下滚动一点,它就会进入固定位置)
有什么见解吗?不知道为什么它能在firefox中工作,但我认为以下内容适用于所有浏览器:
$(document).ready(function() {
var s = $(".navMenu");
var banner = $("header > img");
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
// if the scroll position is greater than the height of the banner
// fix the navigation.
if (windowpos >= banner.outerHeight()) {
s.addClass("fixedTop"); }
else {
s.removeClass("fixedTop");
}
});
});
必须拉小提琴。就是这样!非常感谢