使div滾動直到它到達頁面頂部？

Question

我試圖在wordpress中使用以下示例 - 我需要一個包含廣告的div，例如，300px向下翻頁，然后向上滾動到頁面直到它到達頂部，然后如果用戶繼續滾動則保持在那里下。 這個例子應該解釋一下：

http://jsfiddle.net/jPxEY/

這里它是一個html文件應該工作，一切似乎在那里，但它將無法正常工作： http ： //www.altesc.net/exmp.html

事實上，如果你在“類似問題”框中查看並向下滾動，那正是我所追求的。

我很確定我已經完成了所有事情，但javascript似乎不起作用。 如果我從jquery復制所有內容並將其直接添加到標題中，而不是在單獨的js文件中，它可以工作，只有當我像這樣調用jquery時：

<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript">

它沒有開始。

關於什么是錯的任何想法？

添加了我的標題以幫助：

<script type='text/javascript' src='http://www.altesc.net/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

<script type="text/javascript">
//<![CDATA[
$(window).load(function(){

$(document).scroll(function() {

var useFixedSidebar = $(document).scrollTop() > 330;
$('.adscrollleft').toggleClass('fixedSidebar', useFixedSidebar);

});

});//]]> 
</script>

Answer 1

刪除這個： $(window).load(function(){

Answer 2

正如我在問題評論中所說，你的jQuery包含文件在最底層調用了jQuery.noConflict(); ，它釋放了對jQuery()的$簡寫函數引用。

因此，最直接的解決方法是：

jQuery(window).load(function(){
    jQuery(document).scroll(function() {
        var useFixedSidebar = jQuery(document).scrollTop() > 330;
        jQuery('.adscrollleft').toggleClass('fixedSidebar', useFixedSidebar);
    });
});

現在你的代碼工作了。 這是在我的計算機上運行的文件的Pastebin（請注意，如果您的屏幕非常大，則不應保持瀏覽器最大化）：

http://pastebin.com/GCvaCF7c

有些人真的很喜歡$速記，所以你看到了很多：

//                   >>> The $ below <<<
jQuery(window).load(function($){
    $(document).scroll(function() {
        var useFixedSidebar = $(document).scrollTop() > 330;
        $('.adscrollleft').toggleClass('fixedSidebar', useFixedSidebar);
    });
});

jQuery允許您在范圍內使用它。 現在，只要你在全球范圍內使用jQUery() ，就習慣了。

Answer 3

這里有幾個問題：

• 首先，使用jQuery的本地副本。

  雖然在線副本會一直保持不變，但最好是擁有自己的副本。 以另一種方式來思考：如果jQuery網站出現故障怎么辦？ 你正在“吮吸”的腳本也會崩潰，並使依賴於leeched jQuery的腳本失敗。

• 首先加載庫

  腳本按順序加載和解析，一個接一個（除非使用了一些異步內容，如defer或async屬性，或依賴加載器）。 如果您的代碼片段依賴於jQuery並在jQuery 之前加載，那么它將失敗。 首先加載庫腳本，然后加載依賴它的腳本。

  快速瀏覽我的意思：

   <script src="jQuery.js"></script> <script src="yourScriptThatDependsOnJQuery.js"></script> <script> //scripts that depend on jQuery </script> 

Answer 4

有一些事情你可以嘗試讓這個工作。

1. 確保您的腳本被拉入頁面，檢查的一種方法是使用Chrome調試器中的“來源”標簽，然后在html head部分中搜索其他文件

2. 在包含jQuery之后，請確保已包含依賴腳本，因為它肯定取決於它。

3. 檢查jQuery是否包含正確且僅一次。

4. 注意jQuery caonflicts。 還有一些其他的庫覆蓋了$，所以你的代碼不能工作，因為$不再是jQuery的別名。 您可以使用jQuery.noConflict()來避免與頁面上使用相同變量$的其他庫發生沖突。