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

Disable Sticky Nav when on Mobile

本文关键字：导航 移动      更新时间：2023-09-26

我想在移动设备上禁用我的粘性导航栏。请看一下我的 JS 小提琴Visit http://jsfiddle.net/iolo/0pjrvumm/1/

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

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

您

遇到的问题是，当您使用移动设备时（如果您在移动设备中打开它），那么最初您会var stickyNavTop = $('#main-nav-wrapper-sticky').offset().top;

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

或者强制它显示：块（$('#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/

相关文章：