Adding class on scroll with jquery

Question

I currently have a jquery command to change the background of my navigation once it has scrolled beyond a certain point. It's based on the number of pixels scrolled, however I would like it to be based on viewport height so that it is responsive. Is this possible. Here is what I have at the moment

$(window).scroll(function(){
    var fromTopPx = 1080; // distance to trigger
    var scrolledFromtop = jQuery(window).scrollTop();
    if(scrolledFromtop > fromTopPx){
        $('header').addClass('scrolled1');
    }else{
        $('header').removeClass('scrolled1');
    }
});

so what happened with your code?? is there any error?? I think your code should work fine — Mohamed-Yousef, Dec 04 '15 at 15:13
@Mohamed-Yousef did you read the question? The OP is wondering how `var fromTopPx` can be a dynamic value, instead of putting in a fixed viewport height — Adjit, Dec 04 '15 at 15:14
Possible duplicate of [Get the browser viewport dimensions with JavaScript](http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript) — Adjit, Dec 04 '15 at 15:16
this question is impossible to answer without seeing the whole context, e.g. html. Why not post a jsfiddle? — Gogol, Dec 04 '15 at 15:23
There's no error @Mohamed-Yousef . I just want the class to be added when the user has scrolled the full length of the viewport as opposed to using pixels which will obviously only work on a certain sized screen (in this case 1080px) . i want to use viewport height instead but am unsure of the syntax required — mccavandish, Dec 05 '15 at 21:32
http://stackoverflow.com/questions/3044573/using-jquery-to-get-size-of-viewport — Mohamed-Yousef, Dec 05 '15 at 22:02

score 0 · Answer 1 · answered Dec 04 '15 at 15:14

0

use document instead window: $(document).scrollTop()

answered Dec 04 '15 at 15:14

AldoZumaran

547
5
23

Adding class on scroll with jquery

1 Answers1