javascript - 滚动到页面顶部后使导航栏恢复正常

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)。

引用资料:

• > addClass() .
• > removeClass() .
• > scroll() .