jQuery中的ScollTop無法正常工作

-1

我只是想通過滾動頁面來更改我的網頁。而在這段代碼中，我試圖改變頁面中修復的div的背景顏色。這段代碼有什麼問題？jQuery中的ScollTop無法正常工作

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQuery</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <style type="text/css"> 
     body{ 
      height: 5000px; 
     } 
     div{ 
      height: 100px; 
      width: 100px; 
      background: red; 
      position: fixed; 
      top: 300px; 
     } 
    </style> 
</head> 
<body> 

    <div></div> 



    <script type="text/javascript"> 
     function change(){ 
      if($(window).scrollTop() > 500){ 
       $('div').css("background", "green"); 
      } else{ 
       $('div').css("background", "red"); 
      } 
     } 
      change(); 
    </script> 
</body> 
</html>

來源

2014-03-03 Faiz Ahmed

問題可能與'$（窗口）' –

你」當窗口的頂部滾動位置是，只調用'change（）'一次仍然是零。也許你應該綁定到'scroll'事件？ –

我想你應該把它在.scroll()方法：

$(function(){ 

    $(window).on('scroll', function(){ 
     change(); 
    }).scroll(); 

});

，或者你可以做縮短這樣的代碼：

$(function(){ 

    $(window).on('scroll', change).scroll(); 

});

問題在你的代碼是你只是叫你的功能，那個時間點.scrollTop()值是0它永遠不會更新。

所以解決的辦法就是把這個函數按照上面建議的方式.scroll()。在每次滾動時，都會獲得新的滾動頂部位置。

來源

2014-03-03 11:27:25 Jai

這是一個很好的答案，但您可以稍微調整它： $（window）.on（'scroll'，change）; change（）; – sneeky

@ sneeky我正要發佈它。 – Jai

<script type="text/javascript"> 
    $(document).scroll(function(){ 
    if ($(window).scrollTop() > 500) { 
     $('div').css("background", "green"); 
    } else { 
     $('div').css("background", "red"); 
    } 
    }); 
</script>

來源

2014-03-03 11:28:55 SalmanShariati

請儘量放置的document.ready內的變化.. 比它看起來OK等。

<script type="text/javascript"> 
    function change(){ 
     if($(window).scrollTop() > 500){ 
      $('div').css("background", "green"); 
     } else{ 
      $('div').css("background", "red"); 
     } 
    } 

    $(document).ready(function() { 
     change(); 
    }); 
</script>

來源

2014-03-03 11:30:54

只是注意到，也許你的代碼工作正常，但你沒有給你的div的高度/寬度，因此它可能太小，看不到..即0像素由0px ..嘗試給它一個style =「width：50px！重要;高度：50px！重要;「 –

而不是訪問$(window).scrollTop使用$(document).scrollTop。

jQuery代碼：

 $(document).on('scroll',function() { 
      if($(this).scrollTop() > 500){ 
      $('aside').css("background", "green"); 
     } else{ 
      $('aside').css("background", "red"); 
     } 
     }); 

     $(document).scroll();

現場演示：

http://jsfiddle.net/dreamweiver/PBG9Z/15/

編碼快樂:)

來源

2014-03-03 11:54:04 dreamweiver

jQuery中的ScollTop無法正常工作

回答

相關問題