Bootstrap Scrollspy和粘性導航不能一起工作

在這裏混合兩個元素有點問題！Bootstrap Scrollspy和粘性導航不能一起工作

我相信你以前看過這種技術。一個粘滯的導航欄，位於功能區域下方，然後在用戶向下滾動時粘貼到頁面的頂部。當用戶向下滾動頁面的導航欄亮起相應的部分，並且用戶可以使用導航欄太各地段跳..

測試網站是在這裏：

http://www.domaincreative.co.uk/dev/midasflo-test2

的scrollspy引導元似乎在滾動上運行良好。但是，一旦你點擊一個區域，就會出現問題。通常它會出現在錯誤的部分或突出顯示導航區中的錯誤區域，但在右側部分。

有沒有人知道可以做些什麼來解決這個問題？我的猜測是粘滯導航可能導致高度問題？使其看起來比導航粘貼時短？

從本質上講，它的工作直到粘滯導航生效，讓他們一起工作的解決方案是什麼？

來源

2013-07-16 user2586473

的鏈接，幫助我通過一些問題的工作：

http://mtjhax.wordpress.com/2013/02/11/twitter-bootstraps-scrollspy-plugin-needs-better-docs/

同樣重要：

設置詞綴

提供的導航元素的數據 - spy =「affix」，data-offset-top =「」，data-offset-bottom =「」其中偏移爲p或bottom告訴瀏覽器何時切換導航元素的位置。（注：貼上頂通常是位置：靜態，貼上通常的位置是：固定的，並加蓋底通常是位置：絕對）

獲取定位正確

確保設置在你的CSS是「位置：_____;」和「top：__px」。（可能的話，你只需要設置一個頂部.affix，爲.affix頂位置&底部.affix底，並沒有什麼。）

解決閃爍問題

如果你已經有當您滾動到bototm（類在.affix和.affix-bottom之間快速切換）時導致nav元素閃爍的問題，那麼您可能需要在父元素上設置position：relative。我會推薦一個父級，它佔據您的導航將會「移動」的全部高度，這樣您可以設置底部：0或底部：底部爲[底部所需的邊緣]。

啓動ScrollSpy與JS

你開始你的頁面的詞綴部分。現在讓我們啓動spyscroll。請注意，您可以通過數據屬性或通過js啓動spyscroll。讓我們來做js吧。

在上面的鏈接中，僅僅複製代碼是很危險的，因爲「＃」註釋語法破壞了我的代碼（切換到//並且一切正常）。

添加到您的身體的底部：

<script> 
    // initiates scrollspy on body targeting the nav wrapper 
    jQuery('body').scrollspy({ target: '#nav-wrapper' }); 
</script>

的使用注意事項身體，而不是像在文檔的導航元素。超級重要。注意，我瞄準導航包裝不是導航本身（如果瞄準導航本身的間諜將無法正常工作，而是在導航底部李總是會高亮顯示）

完成

這是一個噩夢發現，所以希望它可以幫助某人。

編輯：我的例子。請注意，包裝保持其寬度，以便固定導航不與其他內容重疊。（我必須給導航本身一個寬度，以便在跳出導航包裝時不會改變大小）。

<ul class="nav nav-list affix" data-spy="affix" data-offset-top="585" data-offset-bottom="425" id="prepare-navigation"> 
    <li class="nav-header">Where?</li> 
    <li class="divider"></li> 
    <li><a href="#at-the-museum-day-time">When?</a></li> 
    <li class="divider"></li> 
    <li><a href="#at-the-museum-overnight">Why?</a></li> 
    <li class="divider"></li> 
    <li><a href="#around-the-region">How?</a></li> 
    <li class="divider"></li> 
    <li><a href="#at-your-school-location">Etc?</a></li> 
    <li class="divider"></li> 
</ul>

來源

2013-08-20 03:50:09 SweetTomato

，我似乎無法鎖定唯一的問題是，閃爍的問題。我試過你的解決方案，即將整行的父級設置爲'position：relative;'。這仍然不起作用。這是我的工作示例：http://jsfiddle.net/nguyenj/d4PEN/。 '.affix'類和'.affix-bottom'類可以很快地來回切換。 – Seed

注意：貼上的導航將跳出其包裝。因此，確保導航本身具有您想要的所有品質（即寬度和背景處理）。我會確保A）你的導航，並且你的包裝具有寬度屬性（即包裝上的span3類，以及nav的給定寬度）和B）樣式屬性（即井的類）是導航的一部分，它是兒童，而不是包裝。我現在在上面的答案中包含了我的示例。我會盡快解決你的flickr問題。 – SweetTomato

嘿，我剛開始使用不同的插件：[sticky-nav]（https://github.com/nguyenj/sticky-nav）。下面是它的實例：[示例]（http://jsfiddle.net/nguyenj/eg2Ly/）。它一直在爲我工作。 – Seed

很好的回答，後其幫助了我。夫婦的東西要添加，因爲我剛剛通過Bootstrap 3上的這一項工作。

如果您不包含doctype，您將無法獲得正確的行爲。無論如何，這是必不可少的最佳做法，但我在我的臨時項目中忽略了它，並且我看到「導航中的底部li總是會突出顯示」影響。

引導程序利用了某些HTML元素和CSS屬性，這些屬性需要使用HTML5文檔類型。將它包含在所有項目的開始處。

一些很好的補充文檔的教程。

http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins http://www.codingeverything.com/2014/02/BootstrapDocsSideBar.html

來源

2016-02-19 04:45:53 radlab

Bootstrap Scrollspy和粘性導航不能一起工作

回答

相關問題