【问题标题】: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 像素而不刷新浏览器时。当我开始滚动时,导航栏会跳到顶部,并且无法正常工作。

【问题讨论】:

    标签: javascript jquery html css


    【解决方案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。
    猜你喜欢
    • 2016-09-26
    • 2019-04-16
    • 1970-01-01
    • 2015-03-14
    • 1970-01-01
    • 2019-07-11
    • 2013-05-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多