Verwijder class als bottom naderd

Door Bryan De Baar op 19-05-2015 22:11

1.690 views

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:


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

johan de wit

19-05-2015 23:08 gewijzigd op 19-05-2015 23:11

Dit is waar je naar opzoek bent.

HTML


<header class="clearHeader">
</header>

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

CSS


.clearHeader{
height: 200px; 
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}

.darkHeader {height: 100px;}

.wrapper {
height:2000px;
}


$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        $(".clearHeader").addClass("darkHeader");
    } else {
        $(".clearHeader").removeClass("darkHeader");
    }
});

Bryan De Baar

20-05-2015 01:05

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

21-05-2015 15:08

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


$(window).scroll(function() {    
    var scrollTop2 = $(window).scrollTop();

if (scrollTop2 >= 100) {

//hier de actie

Reageren

Inloggen om te reageren