screen.heightが460pxよりも小さい場合にクラスを削除する

Question

私はこのプロジェクトを私は固定したナビゲーションを持っていますが、ナビゲーションは460pxよりも画面が長くなります。その固定されたnavを削除したい、screen.height私は460ピクセル未満です。これは私のコードですが、私は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.screen.availHeightの代わりに$(window).height();を試してみましたか？

Answer 2

mainの値は1回だけ計算され、ユーザーがスクロールするたびに古いmainの値が使用されます。おそらく、これを変更する必要があります。これに

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

：それは決して一度合格していませんので、もし

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