我想在移动设备上禁用Sticky Navbar。请看看我的JS小提琴Visit http://jsfiddle.net/iolo/0pjrvumm/1/
我的媒体查询设置为400px。 在大于400px的窗口上加载页面时，粘性导航栏效果很好，当我将其大小调整为小于400px而不刷新浏览器时，移动导航栏也很有效。
当我在小于400px的窗口中加载页面时，移动导航栏按计划运行。但是我遇到的问题是当我在不刷新浏览器的情况下将窗口大小调整到400px以上时。当我开始滚动时，导航栏将跳到顶部，并且不像通常那样起作用。
答案 0 :(得分：0)
您遇到的问题是当您使用移动设备时（如果您是在移动设备上打开它），那么最初您会var stickyNavTop = $('#main-nav-wrapper-sticky').offset().top;
自$('#main-nav-wrapper-sticky') display:none 400px后（由于您的媒体查询＆lt; stickyNavTop），0设置为var stickyNavTop = 108，导致您的所有问题问题，因为您从不调整标题导航的大小，为什么不将其硬编码到$('#sticky-nav-placeholder').css({ 'display': 'block'});？
或强制它显示：阻止（var stickyNavTop = $('#main-nav-wrapper-sticky').offset().top;）然后调用$(document).ready(function() {
var stickyNavTop = 108; // Since you never change the height
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#main-nav-wrapper-sticky').css('position','fixed');
$('#main-nav-wrapper-sticky').css('top','0');
$('#sticky-nav-placeholder').css({ 'display': 'block'});
}
else {
$('#main-nav-wrapper-sticky').css('position','relative');
$('#sticky-nav-placeholder').css({ 'display': 'none'});
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
然后确定是否低于400px并重新隐藏它，如果这是真的。
{{1}}
JSFiddle：http://jsfiddle.net/0pjrvumm/11/