Question

我有这个项目，我有一个固定的导航，但导航比460 px以下的屏幕更长，我想删除固定导航，当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) {
        ...

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

2 个答案: