在滚动上添加和删除类 [英] 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屋!