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

Posted 2023-05-07

【中文标题】在移动设备上禁用粘性导航

【英文标题】：Disable Sticky Nav when on Mobile

【发布时间】：2015-01-10 02:27:00

【问题描述】：

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

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

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

【参考方案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/

【讨论】：

就这么简单！非常感谢您的帮助和清晰的解释。我最终硬编码了stickyNavTop，因为就像你说的那样，这永远不会改变。再次感谢您的帮助，Simply Graig。