CODEWITHSUNDEEP
jqueryscroll
Daniel Ramirez-Escudero
Daniel Ramirez-Escudero

Reputation: 4047

During scroll add a class and if scroll ended remove class

I searched in different post and could not find the answer for a jQuery which responds only on scroll, no matter which position. I would like to have a code that on scroll adds a class and when scroll is finished remove this class.

For now I have something like this:

$(window).on('scroll', function () {
    if($(window).scrollTop()){
        $('.site-header').addClass('ipad-on-scroll');
    }else{
        $('.site-header').removeClass('ipad-on-scroll');
    }
});

This is not working, how would it be correct?

Upvotes: 1

Views: 1834

Answers (4)

Shri
Shri

Reputation: 731

create css for your class 'ipad-on-scroll' first.

display it on scroll like below.

Using jQuery.

$('.site-header').scroll(function() {
   $('ipad-on-scroll').css( "display", "inline" ).fadeOut( "fast" );            
});

try this.

Upvotes: 0

Saurabh
Saurabh

Reputation: 1007

I this what you are looking for

as if in jQuery checks for true or false value and $(window).scrollTop() returns a integer value just check that and you are done.

so it the scrollTop() == 0 means it is on top else it is on scroll

Fiddle demo

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

Try this:

$(window).scroll(function(){

    $('.site-header').toggleClass('ipad-on-scroll');

});

Upvotes: 2

Craftein
Craftein

Reputation: 762

Try this:

$(window).scroll(function(){
    // stuff
});

Here's the Docs

Upvotes: 1

Related Questions