Question

所以我正在尝试学习javascript和jQuery。我正在编写一个项目网站，并希望在页面滚动时使导航更小更透明。我写了这个，它工作得很好`

$(document).scroll(function(){
  $('.nav').css({"opacity": "0.85", "height": "55px"});
  $('.nav-container').css({"margin-top": "-13px", "font-size": "1.4em"})
});

`

但是当我们一直滚动到顶部时，我希望它恢复正常。似乎没有一个jQuery事件。

Answer 1

我个人建议：

$(document).scroll(function () {
    // select the relevant elements:
    $('#nav, .nav-container')[
        // if the window is at the 'top', we use the 'removeClass' method,
        // otherwise we use 'addClass':
        $(window).scrollTop() == 0 ? 'removeClass' : 'addClass'
    // and pass the 'scrolled' class-name to the method:
    ]('scrolled');
});

使用CSS：

.nav.scrolled {
    opacity: 0.85;
    height: 55px;
}

.nav-container.scrolled {
    margin-top: -13px;
    font-size: 1.4em;
}

JS Fiddle demo

这也使用了更正的（有效的 HTML）。

参考文献：

Answer 2

我已更新了您的jsfiddle here

我刚刚更改了.scroll()功能：

$(document).scroll(function () {
var scroll = $(this).scrollTop();
    if(scroll > 0){
        $('.nav').addClass('scrolled');
        $('.nav-container').addClass('scrolled');
    } else if(scroll == 0){
        $('.nav').removeClass('scrolled');
        $('.nav-container').removeClass('scrolled');
    }
});

并添加了这个css：

.nav.scrolled {
    opacity:0.85;
    height:55px;
}

.nav-container.scrolled {
    margin-top:-13px;
    font-size:1.4em;
}

滚动到页面顶部后，导航栏恢复正常

2 个答案: