javascript - Window Scroll Function Not Working - Stack Overflow

admin管理员组

文章数量:1296279

I was making a blog, and tried to use $(window).scroll(function(), but something prevents it from working.

I try to add class named scrolled to body when user scrolls down. Any idea which would prevent it working properly? Console doesn't give any error regarding to this.

JS

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

        if (scroll >= 100) {
            $("body").addClass("scrolled");
        } else {
            $("body").removeClass("scrolled");
        }
    });
});

LIVE PREVIEW

/

I was making a blog, and tried to use $(window).scroll(function(), but something prevents it from working.

I try to add class named scrolled to body when user scrolls down. Any idea which would prevent it working properly? Console doesn't give any error regarding to this.

JS

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

        if (scroll >= 100) {
            $("body").addClass("scrolled");
        } else {
            $("body").removeClass("scrolled");
        }
    });
});

LIVE PREVIEW

http://personaii-demo.tumblr./

• javascript
• jquery
• html

Share Improve this question Follow edited Jul 25, 2014 at 16:01 morkro 4,67555 gold badges2727 silver badges3535 bronze badges asked Jul 25, 2014 at 15:49 Aleksi TappuraAleksi Tappura 7111 gold badge22 silver badges66 bronze badges 2

• Remove $ from function. If you want to protect function then write (function($) { ... })(jQuery); – Milan and Friends Commented Jul 25, 2014 at 15:51
• @mdesdev Thanks, but it doesn't work for me. – Aleksi Tappura Commented Jul 25, 2014 at 16:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Remove overflow:auto property added to the container. This will work.

Your function takes a $ argument, but you're not passing anything in so it gets overwritten, you should do it like this:

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

        if (scroll >= 100) {
            $("body").addClass("scrolled");
        } else {
            $("body").removeClass("scrolled");
        }
    });
});

Here's a working shorthand solution, fiddle

$(function() {
  $(window).scroll(function() {    
    var scroll = ($(this).scrollTop() > 100) ? $("body").addClass("scrolled") : $("body").removeClass("scrolled");
  });
});

Also if you're using jQueryUI then you can add a little animation to class changing process with switchClass() e.g.

var scroll = ($(this).scrollTop() >= 100) ? $("body").switchClass("default","scrolled", 1000) : $("body").switchClass("scrolled","default", 1000);

*Note: Also don't forget to include jQuery/jQueryUI libraries in your document.

Better JS:

$(function() {
    $(window).on('scroll', function() {  
        $('body').toggleClass('scrolled', $(this).scrollTop() >= 100);
    });
});

On your website, I see no css associated with .scrolled anywhere even if I apply it via the console.

本文标签： javascriptWindow Scroll Function Not WorkingStack Overflow