如果screen.height低于460px，请删除一个类

Question

我有这个项目，我有一个固定的导航，但导航比460像素以下的屏幕长，当屏幕高度低于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).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) {
        ...