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

我想在手机上禁用我的粘性导航栏。请看一下我的JS小提琴

访问

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

---

当我在小于400px的窗口中加载页面时，移动导航栏按计划工作。然而，我遇到的问题是，当我将窗口的大小调整到400px以上而不刷新浏览器时。当我开始滚动时，导航栏将跳转到顶部，并且不能正常工作。

您遇到的问题是，当您在移动设备上（如果您在移动设备中打开它）时，最初会执行

var stickyNavTop=$（“#主导航包装器sticky”）.offset（）.top

但是由于
$（“#主导航包装粘性”）
有
显示：无
（由于您的媒体查询如此简单！非常感谢您的帮助和清晰的解释。我最终硬编码了粘性导航顶，因为正如您所说，这永远不会改变。再次感谢您的帮助，只需Graig。
$(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();
    });
});