Verwijder class als bottom naderd
Kan iemand mij hepen met het volgende:
Als er gescrolled word dan voegt jquery na 100px een class toe aan een div element, dit heb ik werkend.
Maar nu wil ik jquery ook laten kijken naa het aantal pixels tot de bottom van een pagina.
Stel dat er nog 200pixels over zijn tot de bottom dan moet de toegevoegde class weer verijderd worden.
Ik dacht het omgekeerde te doen met jquery:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function(){
$(window).scroll(function() {
var scrollTop2 = $(window).scrollTop();
if (scrollTop2 >= 100) {
$(".listbottom").addClass("fixedbottom");
}else{
$(".listbottom").removeClass("fixedbottom");
}
});
$(window).scroll(function() {
var scrollBottom2 = $(window).scrollBottom();
if (scrollBottom2 <= 200) {
$(".listbottom").removeClass("fixedbottom");
}else{
}
});
});
$(window).scroll(function() {
var scrollTop2 = $(window).scrollTop();
if (scrollTop2 >= 100) {
$(".listbottom").addClass("fixedbottom");
}else{
$(".listbottom").removeClass("fixedbottom");
}
});
$(window).scroll(function() {
var scrollBottom2 = $(window).scrollBottom();
if (scrollBottom2 <= 200) {
$(".listbottom").removeClass("fixedbottom");
}else{
}
});
});
Helaas werkt dit niet :(
Hopende dat iemand mij hiermee kan helpen.
Alvast dank!
Gr. Bryan
HTML
Code (php)
1
2
3
4
5
2
3
4
5
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
</header>
<div class="wrapper">
</div>
CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
.clearHeader{
height: 200px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}
.darkHeader {height: 100px;}
.wrapper {
height:2000px;
}
height: 200px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}
.darkHeader {height: 100px;}
.wrapper {
height:2000px;
}
JS
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});
Gewijzigd op 19/05/2015 23:11:43 door johan de wit
Bedankt voor de reactie.
Wat ik bedoel is dat als er gescrolld word er naar 100pixels de class fixed bij komt.
Dit werk, maar nu wil ik dat als je zover naar beneden scrollt de class fixen weer word verwijderd.
Bijvoorbeeld verwijder class 200pixels boven bottom. dus eigenlijk het tegenovergestelde van voeg class toe 100pixels onder top.
Dus als ik nog 200 pixels kan scrollen dat er dan een actie gebeurt?
Omdat de content verschild van lengte kan ik dus niet werken
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$(window).scroll(function() {
var scrollTop2 = $(window).scrollTop();
if (scrollTop2 >= 100) {
//hier de actie
var scrollTop2 = $(window).scrollTop();
if (scrollTop2 >= 100) {
//hier de actie