javascript - Jquery addclass after scrolling 500px - Stack Overflow

admin管理员组

文章数量:1394585

I want to add a class to a div after scrolling 500px down the page using jquery. I found a way of doing it but it's an immediate transition, I want to be able to controll how long it takes to add the class like with the normal Jquery addclass.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".nav").addClass("navnewclass");
    }
});

I tried doing this:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".nav").addClass("navnewclass", 2000);
    }
});

but it was the same.

I want to add a class to a div after scrolling 500px down the page using jquery. I found a way of doing it but it's an immediate transition, I want to be able to controll how long it takes to add the class like with the normal Jquery addclass.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".nav").addClass("navnewclass");
    }
});

I tried doing this:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".nav").addClass("navnewclass", 2000);
    }
});

but it was the same.

• javascript
• jquery
• html
• addclass
• scrolltop

Share Improve this question Follow edited Aug 17, 2013 at 15:11 Jaak Kütt 2,65644 gold badges3333 silver badges4040 bronze badges asked Aug 17, 2013 at 12:22 DavidDavid 6522 gold badges22 silver badges77 bronze badges 1

• I believe he's talking about the transitioning between two classes when using .toggleClass with jQueryUI. EDIT Oh, you already answered. Duh. – Bill Criswell Commented Aug 17, 2013 at 13:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I want to be able to controll how long it takes to add the class like with the normal Jquery addclass.

addClass is always instantaneous, it's not part of the animation suite.

There are plug-ins that will do class-based animations for you (most notably jQuery UI's addClass override), but jQuery itself does not. Simply adding jQuery UI to your page will make your second example work. But there are other options as well.

Your options are to use one of those plug-ins, or animate the properties directly (using animate) rather than using a class. Note that jQuery only animates certain kinds of properties (not, notably, colors — jQuery UI adds support for animating colors as well).

Here's an example animating a class (with colors) using jQuery UI: Live Copy | Live Source

<style>
.testing {
  color: white;
  background-color: blue;
}
</style>

<!-- ...and later in the body... -->

<p>After half a second, the div below will spend two seconds animating the addition of a class.</p>
<div class="nav">This is a test .nav element</div>
<script>
setTimeout(function() {
    $(".nav").addClass("testing", 2000);
}, 500);
</script>

IT WILL WORK FINE FOR ME.

$(document).scroll(function() {    
var scroll = $(this).scrollTop();
if (scroll >= 500) {
setTimeout('$(".nav").addClass("navnewclass")',1000);
}
});

instead of 1000 U can just set your time.

you can do that using jQuery or $ sign

example:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
        $("#logo-not-scroll").addClass("blue1");
    }
    else{
        $("#logo-not-scroll").removeClass("blue1");
    }
});

or

jQuery(window).scroll(function() {    
        var scroll = jQuery(window).scrollTop();
        if (scroll >= 100) {
            jQuery("#logo-not-scroll").addClass("blue1");
        }
        else{
            jQuery("#logo-not-scroll").removeClass("blue1");
        }
});

本文标签： javascriptJquery addclass after scrolling 500pxStack Overflow