如何仅使用jQuery将导航栏固定在大屏幕顶部

Question

基本上，当我向下滚动150像素且屏幕宽度大于850像素时，我希望菜单激活固定类。

我使用了此代码，但菜单仍固定在小屏幕（小于850像素）的顶部：

$(window).on('resize', function() {
        if ($(window).width() > 850) {
            var num = 150;
//            $('nav#site-navigation').addClass('fixed');
                $(window).bind('scroll', function () {
                    if ($(window).scrollTop() > num) {
                        $('nav#site-navigation').addClass('fixed');
                        }
                     else {                    
                        $('nav#site-navigation').removeClass('fixed');
                    }
                });
            }

        else{
            $('nav#site-navigation').removeClass('fixed');
        }

如果需要，这里是我的CSS：

.fixed {
    top: 0%;
    width: 100%;
    text-align: center;
    bottom: auto !important;
    z-index: 9999;
    position:fixed !important;
} 

仅当屏幕大于850时，才能将导航栏固定在顶部吗？

Answer 1

您可以向该CSS类添加媒体查询：

@media only screen and (min-width: 850px){
    .fixed {
        top: 0%;
        width: 100%;
        text-align: center;
        bottom: auto !important;
        z-index: 9999;
        position:fixed !important;
    } 
}

Answer 2

尝试像这样使用CSS @media：

@media screen and (max-width: 850px) {
    .fixed {
        position: static !important;
    }
}

Answer 3

我基于@holtc的想法使用了它并且有效

@media (max-width: 850px){    
    nav#site-navigation.fixed {
         position: initial !important;
    }    
}