javascript - 在移动设备上禁用粘性导航

Question

我想在移动设备上禁用粘性导航栏。请查看我的 JS Fiddle 访问 http://jsfiddle.net/iolo/0pjrvumm/1/

我将媒体查询设置为 400 像素。 当在大于 400 像素的窗口上加载页面时，粘性导航栏效果很好，当我将其调整到小于 400 像素而不刷新浏览器时，移动导航栏也很好用。

当我在小于 400 像素的窗口中加载页面时，移动导航栏按计划工作。但是我遇到的问题是当我在不刷新浏览器的情况下将窗口大小调整为超过 400px 时。当我开始滚动时，导航栏会跳到顶部，并且无法正常工作。

Answer 1

你遇到的问题是，当你在移动设备上时(如果你在移动设备上打开它)然后最初你做 var stickyNavTop = $('#main-nav-wrapper-sticky').offset( ).top;

但是因为 $('#main-nav-wrapper-sticky') 有 display:none (由于你的媒体查询 <400px) 然后 stickyNavTop 设置为 0 这会导致您的所有问题，因为您从不调整标题导航的大小，为什么不将其硬编码为 var stickyNavTop = 108?

或者强制显示:block ($('#sticky-nav-placeholder').css({ 'display': 'block'});) 然后调用 var stickyNavTop = $('#main-nav-wrapper-sticky').offset().top; 然后判断是否低于 400px，如果是则重新隐藏。

$(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();
    });
});

JSFiddle:http://jsfiddle.net/0pjrvumm/11/