javascript - 使用滚动和屏幕大小的嵌套 JQuery if 语句

Question

尝试在滚动时更改导航栏的大小。唯一的区别是我需要两组尺寸，具体取决于屏幕尺寸。仅尝试调整函数以实现屏幕尺寸，收缩类就可以保证工作。

编辑:澄清一下，我想在有人向下滚动页面时调整导航栏的高度。还需要检查屏幕尺寸是否 < 或 > 小于 768 像素，因为我需要两组尺寸。希望较大的集合从 250 像素开始，滚动时更改为 150 像素。在较小的屏幕上，我希望尺寸在 150 像素和 70 像素之间切换。

$(window).scroll(function() {
    if ($(window).width() > 768) {
        if ($(document).scrollTop() > 50) {
            $('nav').addClass('shrink');
            $(".navbar").css({
                'height': '150px',
            });
        } else {
            $('nav').removeClass('shrink');
            $(".navbar").css({
                'height': '250px',
            });
            else if ($(window).width() < 768) {
                if ($(document).scrollTop() > 50) {
                    $('nav').addClass('shrink');
                    $(".navbar").css({
                        'height': '70px',
                    });
                }
            } else {
                $('nav').removeClass('shrink');
                $(".navbar").css({
                    'height': '150px',
                });

编辑 2:累了这样的事情没有运气

        $(document).ready(function() {
          $(window).scroll(function() {
              if ($(document).scrollTop() > 50) {
                // check the screen size
                if ($(window).width() > 768) {
                  $('nav').addClass('shrink');
                  $(".nav-bar").css("height", "150px");
                } else {
                  $('nav').addClass('shrink');
                  $(".nav-bar").css("height", "80px");
                }
              } else {
                // back to normal when there is less scrolling 
                if ($(window).width() < 768) {
                  $('nav').removeClass('shrink');
                  $(".nav-bar").css("height", "250px");
                } else {
                  $('nav').removeClass('shrink');
                  $(".nav-bar").css("height", "100px");
                }
              });
          });

编辑 3:我需要这样的东西...我如何使它在语法上正确？

    $(window).scroll(function() {
        if ($(window).width() > 768) {      
            if ($(document).scrollTop() > 50) {
                $('nav').addClass('shrink');
                $(".navbar").css({
                'height':'150px',
            });
            } else {
                $('nav').removeClass('shrink');
                $(".navbar").css({
                'height':'250px',
            });
        } else {
            if ($(document).scrollTop() > 50) {
                $('nav').addClass('shrink');
                $(".navbar").css({
                'height':'120px',
            });
            } else {
                $('nav').removeClass('shrink');
                $(".navbar").css({
                'height':'140px',
        }
        });
    }
});
}); 

Answer 1

根据我从你的问题中了解到的情况，你可以这样实现:

$(window).scroll(function() {
    if ($(window).width() > 768) {      
        if ($(document).scrollTop() > 50) {
            $('nav').addClass('shrink');
            $(".navbar").css({
               'height':'150px',
            });
        } else {
            $('nav').removeClass('shrink');
            $(".navbar").css({
                'height':'250px',
            });
        }
    } else {
        if ($(document).scrollTop() > 50) {
            $('nav').addClass('shrink');
            $(".navbar").css({
                'height':'120px',
            });
        } else {
            $('nav').removeClass('shrink');
            $(".navbar").css({
                'height':'140px',
            });
         }
     }
 }); 

查看 CODEPEN 上的工作示例