如果screen.height低于460px，则删除类

Question

我有这个项目，我有一个固定的导航，但导航比460px下的屏幕更长，我想删除固定的导航，当screen.height我低于460px。这是我的代码，我尝试了3种不同的东西，它不起作用：

// var ratio = window.devicePixelRatio || 1; 
//var ScreenHeight = screen.height * ratio;  
// var ScreenHeight = widows.screen.height; 
var ScreenHeight = window.screen.availHeight; 

if (ScreenHeight < 460) { 
    $('.nav-container').removeClass('sticky'); 
} 

var headerHeight = $('header').height(); 
var main = 120; 
main = document.getElementById("main").offsetHeight; 
$(window).scroll(function() { 

    if (main > 825) { 
     var headerHeight = $('header').height(); 
     if ($(window).scrollTop() >= headerHeight) { 
      $('.nav-container').addClass('sticky'); 
     } else { 
      $('.nav-container').removeClass('sticky'); 
     } 
    } 
}); 

我在做什么错？

Answer 1

你试过$(window).height();而不是window.screen.availHeight？

Answer 2

您只计算main的值，每次用户滚动时，都使用旧的main值。您可能需要更改此：

... 
main = document.getElementById("main").offsetHeight; 
$(window).scroll(function() { 
    if (main > 825) { 
     ... 

要这样：

... 
$(window).scroll(function() { 
    main = document.getElementById("main").offsetHeight; 
    if (main > 825) { 
     ...