javascript - 在滚动上添加和删除类

Question

我正在处理一个 HTML 页面，其中有一个小导航，该导航从页面的中间位置开始。我希望导航栏在到达页面顶部时坚持到页面顶部(固定)。我的尝试是这样的:

脚本:

<script>
$(function() {
    var header = $(".clearHeader");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 100) {
            header.removeClass('scrollHeader').addClass("fixedHeader");
        } else {
            header.removeClass("fixedHeader").addClass('scrollHeader');
        }
    });
});

</script>

HTML:

<div class="scrollHeader">
            <div class="row" style="background:#444;">
            <div class="container">
            <a href="#"><div class="col-sm-3 smallNav">
            Perks
            </div></a>
            <a href="#"><div class="col-sm-3 smallNav">
            Growth
            </div></a>
            <a href="#"><div class="col-sm-3 smallNav">
            Technology
            </div></a>
            <a href="#"><div class="col-sm-3 smallNav">
            Apply
            </div></a>
            </div>
            </div>
            </div>

CSS:

.scrollHeader { position: relative !important;}
.fixedHeader {position: fixed !important; }

然而，这段代码不起作用。有什么建议么？我加载了 jQuery 1.9.1。 Fiddle

Answer 1

快速浏览一下，我不确定您是否在代码开头定位了正确的对象。

var header = $(".clearHeader");

但是在您的 HTML 中，没有任何东西属于“clearHeader”类，所以这不会起作用。也许将其更改为

var header = $(".scrollHeader");

会成功吗？

编辑:同时添加 top:0px;到您的 fixedHeader 类将使导航固定在页面顶部。

fiddle :http://jsfiddle.net/5d7ymoc0/2/

奖励 super 流畅的导航滚动操作:http://jsfiddle.net/5d7ymoc0/4/