窗口滾動功能不能正常工作

我正在創建一個博客，並嘗試使用$(window).scroll(function()，但是有些東西阻止了它的工作。窗口滾動功能不能正常工作

我嘗試在用戶向下滾動時將名爲scrolled的類添加到body。任何會阻止它正常工作的想法？控制檯不會給出與此有關的任何錯誤。

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

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

實時預覽

http://personaii-demo.tumblr.com/

來源

2014-07-25 Aleksi Tappura

從函數中刪除'$'。如果你想保護函數，然後寫'（函數（$）{...}）（jQuery）;' – mdesdev

@mdesdev謝謝，但它不適用於我。 –

你的函數需要一個$的說法，但你不能因此被覆蓋遞東西，你應該做的是這樣的：

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

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

來源

2014-07-25 15:52:37 Ben

似乎不起作用。我使用名爲＃sb-site的包裝，這可能是問題嗎？我試着.scroll，它的工作，但我不需要這樣的行爲。 –

Better JS：

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

在您的網站上，我看不出有.scrolled即使我通過控制檯應用它的任何地方相關的CSS。

來源

2014-07-25 15:56:32 AlienWebguy

這是如此短我喜歡它:) – mdesdev

與jQuery打高爾夫球似乎從來沒有公平;） – AlienWebguy

嘿，你爲什麼關閉文檔準備與空括號'}）（）;'？ – mdesdev

這裏的工作簡便的解決方案，fiddle

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

此外，如果你正在使用jQueryUI的話可以加一個小動畫類變化過程與switchClass()例如

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

*注：也不要忘了，包括您的文檔中的jQuery/jQueryUI的庫。

來源

2014-07-25 15:56:35 mdesdev

似乎不起作用。我使用名爲＃sb-site的包裝，這可能是問題嗎？我試着.scroll，它的工作，但我不需要這樣的行爲。 –

刪除溢出：將自動屬性添加到容器中。這將工作。

來源

2015-11-19 05:08:33 Kapilrc

窗口滾動功能不能正常工作

回答

相關問題