在滚动上添加和删除类 [英] Add and Remove Class On Scroll

问题描述

我正在制作一个带有小导航的HTML页面，该页面大约在页面的一半处开始。我希望导航栏在到达页面顶部时粘贴到页面的顶部（变得固定）。我的尝试看起来像这样：

脚本：

 <脚本> 
 $（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 =rowstyle =background：＃444;> 
< div class =container> 
< a href =＃>< div class =col-sm-3 smallNav> 
 Perks 
< / div>< / a> 
< a href =＃>< div class =col-sm-3 smallNav> 
增长
< / div>< / a> 
< a href =＃>< div class =col-sm-3 smallNav> 
技术
< / div>< / a> 
< a href =＃>< div class =col-sm-3 smallNav> 
申请
< / div>< / a> 
< / div> 
< / div> 
< / div> 
  

CSS：

  .scrollHeader {position：relative！important;} 
 .fixedHeader {position：fixed！important; } 
  

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

解决方案

仅仅从一个简单的例子来看，我不确定您是否在代码的开头定位了正确的对象。

  var header = $（。clearHeader）; 
  

但是在您的HTML中，没有类clearHeader，所以这不起作用。也许将它改为

  var header = $（。scrollHeader）; 
  

会诀窍吗？

编辑：也加入顶部：0px;到您的fixedHeader类将使导航棒粘贴到页面的顶部。

小提琴： http://jsfiddle.net/5d7ymoc0 / 2 /

BONUS super smooth nav scroll action： http://jsfiddle.net/5d7ymoc0/4/

I'm working on an HTML page with a small navigation that starts out about halfway down the page. I want the navigation bar to stick to the top of the page (become fixed) when it reaches the top of the page. My attempt looked like this:

The script:

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

The 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>

The CSS:

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

Nevertheless, this code doesn't work. Any suggestions? I have jQuery 1.9.1 loaded. Fiddle

解决方案

Just from a quick look, I am not sure if you are targeting the right object at the start of your code.

var header = $(".clearHeader");

But in your HTML, nothing is of class "clearHeader", so this would not work. Perhaps changing it to

var header = $(".scrollHeader");

Would do the trick?

Edit: also adding top:0px; to your fixedHeader class will make the nav stick to the top of the page.

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

BONUS super smooth nav scroll action: http://jsfiddle.net/5d7ymoc0/4/

这篇关于在滚动上添加和删除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！