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

我正在嘗試在wordpress中使用下面的示例 - 我需要一個包含廣告的div，以在頁面下方開始，例如300px，然後向上滾動頁面直到它到達頂部，然後停留在用戶繼續向下滾動。本示例應解釋：讓div滾動，直到它到達頁面頂部？

這是一個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>

來源

2012-12-29 Jim

該示例似乎工作正常......究竟是什麼問題？ – David

您鏈接到的文件的最底部是：'jQuery.noConflict（）;'如果您打開Firefox的Firebug JS控制檯或Chrome JS控制檯，您會看到一個錯誤，「$'不是函數。爲了簡化，現在在全局範圍內使用'jQuery（）'而不是'$（）'，*尤其*。其他庫以同樣的方式使用'$'，這就是爲什麼''jQuery.noConflict（）'存在。例如 –

舉個例子，$（window）.load（function（）應該是jQuery（window）.load（function（）？我改變了這個，並沒有使它工作。在第一篇文章中的例子，看看他們是否能得到它的工作，然後我可以看看修補程序的代碼。 – Jim

正如我在這個問題在我的評論說，你的jQuery包括文件有，在非常非常底，以jQuery.noConflict();通話，釋放的$速記功能參考jQuery()。

因此，要解決這個最直接的辦法是：

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

現在你的代碼工作。下面是我的電腦上工作文件的引擎收錄（注意你不應該讓你的瀏覽器最大化，如果你有一個非常大的屏幕）：

http://pastebin.com/GCvaCF7c

有些人真的很喜歡$速記，雖然如此，你看到這麼多：

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

jQuery允許您在範圍內使用它。只要習慣了，現在，只要您處於全球範圍內，就可以使用jQUery()。

來源

2012-12-29 04:21:50

謝謝。我在用於測試的離線版本中出現了輕微的代碼錯誤，只有在您發佈此文件時纔會注意到它。現在起作用了。再次感謝。 – Jim

我在範圍中放置了'$'的另一種方式。 –

我想我有一個最後的抱怨。在向下滾動頁面時，如果我點擊刷新，那麼js不會啓動，直到我再次滾動 - 使框跳躍並看起來很尷尬。有沒有人知道這個呢？你可以看到我的意思是通過在這個頁面上滾動一半，看到添加不對齊：http://www.altesc.net/send-us-a-tip/ – Jim

幾個問題：

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

儘管在線副本會一直保持最佳狀態，但最好還是擁有自己的副本。以另一種方式思考它：如果jQuery網站崩潰怎麼辦？您正在「榨取」的腳本也將停止運行，並且使依賴於抽取的jQuery的腳本失敗。第一

腳本
負載庫被加載和在序列解析，一個在另一個（除非使用像defer或async屬性，或一個依賴裝載機一些異步的東西）以後。如果你的代碼片斷依賴於jQuery，並且在之前加載了，那麼它會失敗。首先加載庫腳本，然後加載依賴它的腳本。

快速直觀的明白我的意思：

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

來源

2012-12-29 03:41:58 Joseph

這僅僅是一個例子，jquery是在本地服務的標題是按順序的，也許有一些錯誤？ '' '<腳本類型= 「文本/ JavaScript的」>' // <！[CDATA [ $（窗口）.load（函數（）{ $（文件）.scroll（函數（）{ 變種useFixedSidebar = $（document）.scrollTop（）> 330; $（'。adscrollleft'）。toggleClass（'fixedSidebar'，useFixedSidebar）; }）; }）; //]]> ' – Jim

使用CDN託管包含沒有任何問題。如果您對此很癢，請使用加載後備腳本或庫，例如Require.js。自己託管它也沒什麼問題，但是CDN在提供內容方面非常嫺熟。 –

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

確保您的腳本被拉入的頁面，以檢查一種方法是通過使用Chrome的調試器的「源」選項卡，並尋找在HTML頭中其他文件
在包含jQuery之後，確保你已經包含了依賴腳本，因爲它肯定是依賴於它的。
檢查jQuery是否包含正確且僅包含一次。
小心jQuery caonflicts。還有一些其他庫重寫了$，所以你的代碼不工作，因爲$不再是jQuery的別名。您可以使用jQuery.noConflict()以避免與使用相同變量$的頁面上的其他庫衝突。

來源

2012-12-29 03:53:28 Techie

事情是，我把jsfiddle上的例子放到一個html文件中，沒有額外的腳本，只是一個簡單的例子，但它不起作用： – Jim

@Jim - 你必須*顯示我們*什麼不能實際上工作。它有什麼意義說，嘿，看，這是有效的，但解決了其他我不會告訴你的東西。？細節。 –

如果是這樣，如果你正確地遵循以上4個步驟，你必須很好去。如果在這裏發佈任何錯誤。讓我們看看我怎麼幫你 – Techie

刪除此：$(window).load(function(){

來源

2012-12-29 04:21:43 Chanckjh

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

回答

相關問題