Question

嗨，我有一个导航栏，当页面向下滚动时，它会缩小，而在页面顶部时，它会处于正常状态。我尝试使用下面的jquery代码缩小导航栏和图像

 $(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        $('a.navbar-brand img').css({
            'height': '30'
        });
    } else {
        $('a.navbar-brand img').css({
            'height': '60'
        });
    }

});

问题是，当它具有移动响应能力时，我不希望导航栏缩小，我尝试了以下代码，但没有用

if ($(window).outerWidth() > 768) {
    $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
            $('a.navbar-brand img').css({
                'height': '50'
            });
        } else {
            $('a.navbar-brand img').css({
                'height': '100'
            });
        }

    });
}

我该如何实现

Answer 1

这样更改代码。

if ($(window).outerWidth() > 768) {
    $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
            $('a.navbar-brand img').css('height','50%');
        } else {
            $('a.navbar-brand img').css('height','100%');
        }
    });
}

希望这会有所帮助

移动响应时如何停止缩小图像和导航栏

1 个答案: