Question

尝试在滚动时更改导航栏的大小。唯一的区别是我需要两组尺寸，具体取决于屏幕尺寸。只需尝试调整功能以实现屏幕尺寸，即可保证收缩等级。

编辑：为了澄清，我想在有人向下滚动页面时调整导航栏的高度。还需要检查屏幕尺寸是否为＆lt;或者＆gt;超过768px，因为我想要两套尺寸。希望较大的集合从250px变为滚动变为150px。在较小的屏幕上，我希望尺寸在150px和70px之间切换。

$(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

上的工作示例

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

1 个答案: