Verwijder class als bottom naderd

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bryan De Baar

Bryan De Baar

19/05/2015 22:11:37
Quote Anchor link
Beste,


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)
PHP script in nieuw venster Selecteer het PHP script
1
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{      
        }
    });
});


Helaas werkt dit niet :(

Hopende dat iemand mij hiermee kan helpen.

Alvast dank!

Gr. Bryan
 
PHP hulp

PHP hulp

26/11/2020 15:31:21
 
Johan de wit

johan de wit

19/05/2015 23:08:09
Quote Anchor link
Dit is waar je naar opzoek bent.

HTML
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<header class="clearHeader">
</header>

<div class="wrapper">
</div>


CSS
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


JS
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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");
    }
});
Gewijzigd op 19/05/2015 23:11:43 door johan de wit
 
Bryan De Baar

Bryan De Baar

20/05/2015 01:05:25
Quote Anchor link
Beste Johan,

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.
 
Bryan De Baar

Bryan De Baar

21/05/2015 15:08:34
Quote Anchor link
Ik zal de vraag anders stellen. Kan ik Jquery laten kijken naar het einde van de scroll?
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
$(window).scroll(function() {    
    var scrollTop2 = $(window).scrollTop();

if (scrollTop2 >= 100) {

//hier de actie
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.