我在整个网站构建过程中都没有出现任何问题。然后,在我应该启动的那天,粘性菜单停止了正常工作。菜单应该从底部开始,滚动到顶部,然后粘贴(位置:固定)。
现在,它滚动大约 10px,然后跳到顶部。为什么scrollTop距离计算不正确?
实时站点位于[站点不再存在]
这是粘性菜单的代码。我还使用 JS 将 div 的 min-height 设置为窗口高度,但此处未包含该代码。
$(function(){
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {
$('#wrapper-wcf53badf7ebadf7').css({position: 'fixed', top: '0px', 'background-image':'url(http://amarshall.360zen.com/wp-content/uploads/2014/07/menu-fade-background2.png)'});
$('#block-bcf53bf14093931c').css({display: 'block'});
} else {
$('#wrapper-wcf53badf7ebadf7').css({position: 'static', top: '0px','background-image':'none'});
$('#block-bcf53bf14093931c').css({display: 'none'});
}
});
});
预先感谢您的帮助!我还不是 JS 或 jQuery 专家,因此任何清理问题的建议将不胜感激。
注意:该网站是基于 WordPress 构建的,因此无冲突模式有效。
最佳答案
我认为您在设置 $('big-div')
的最小高度之前正在初始化粘性菜单功能。
页面加载时,菜单从距离顶部 54 像素处开始,因此当您将 offset().top
值存储为 stickyRibbonTop
时,它会存储在 54 像素处。然后在您的滚动事件中,您将与此进行比较。
尝试首先在代码中设置 div 的 min-height
,然后运行相同的脚本。 stickyRibbonTop
的值应该是正确的。
请记住,每次更新 window.height()
时,您都需要重置 stickyRibbonTop
,因此您应该将此粘性菜单函数设为命名函数并在 wrapper_height
函数的末尾调用它。像这样的东西:
function stickyNav() {
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).unbind('scroll', scrollEvent);
$(window).on('scroll', stickyRibbonTop, scrollEvent);
};
function scrollEvent(event) {
var stickyRibbonTop = event.data;
if ($(window).scrollTop() > stickyRibbonTop) {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'fixed', top: '0px', 'background-image': 'url(http://www.adammarshalltherapy.com/wp-content/uploads/2014/07/menu-fade-background2.png)' });
$('#block-bcf53bf14093931c').css({ display: 'block' });
}
else {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'static', top: '0px', 'background-image': 'none' });
$('#block-bcf53bf14093931c').css({ display: 'none' });
}
};
function wrapper_height() {
var height = $(window).height();
var wrapperheight = height - 75;
wrapperheight = parseInt(wrapperheight) + 'px';
$(".bigDiv").css('min-height', wrapperheight);
$("#wrapper-wcf53bad125d7d9a").css('height', wrapperheight);
stickyNav();
}
$(function () {
wrapper_height();
$(window).bind('resize', wrapper_height);
});
关于javascript - scrollTop 突然不适用于粘性菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24844835/