如何保持导航栏固定在大屏幕上只使用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; 
    }  
}