Bootstrap視差工具提示和平滑滾動

Question

我買了一個與Bootstrap一起使用的模板，因為我有點匆忙，我想稍微編輯它，所以它做我想做的。 我創建了一個帶有工具提示的垂直菜單，但工具提示未顯示。 當我在另一個文件中使用完全相同的代碼時，它完美地工作，所以我認為有些東西阻止了它，但我不知道為什么。 有人有線索嗎？

Answer 1

因此，顯然localScroll工作方式是您需要在包含將滾動到指定位置的鏈接的元素上指定滾動屬性。 因此，您需要將HTML更改為點菜單中的類似內容。

HTML：

<ul>
    <li id="dotLink1">
        <h1>First manned flights</h1>
        <a href="#top-section">View</a>
    </li>
    <li id="dotLink2">
        <h1>The frameless parachute</h1>
        <a href="#Section-1">View</a>
    </li>
    <li id="dotLink3">
        <h1>Over the English Channel</h1>
        <a id="dotLink3" href="#Section-2">View</a>
    </li>
    <li id="dotLink4">
        <h1>About</h1>
        <a id="dotLink4" href="#foot-sec">View</a>
    </li>
</ul>

然后你需要實際調用那些容器元素上的localScroll函數來告訴它們鏈接應該導致的位置如下：

JavaScript的：

<script>
jQuery(document).ready(function(){
    jQuery('#topnav, #dotLink1').localScroll(3000);
    jQuery('#startbtn, #dotLink2').localScroll(5000);
    jQuery('#dotLink3').localScroll(7000);
    jQuery('#dotLink4').localScroll(9000);
    //.parallax(xPosition, speedFactor, outerHeight) options:
    //xPosition - Horizontal position of the element
    //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
    //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
    jQuery('#top-section').parallax("50%", 0.1);
    jQuery('#Section-1').parallax("70%", 0.3);
    jQuery('#Section-2').parallax("50%", 0.1);
    jQuery('#foot-sec').parallax("50%", 0.1);
});
</script>

最后，您應該從body標簽中刪除onload屬性，並在jQuery jQuery(document).ready()函數中加載文檔時放置您想要運行的任何內容。 既然你已經有一個在底部，我們將把代碼放在那里。

您需要做的就是將window.location.hash放在那里，而不是創建一個新函數。 但是，僅此一項不會使localScroll工作。 幸運的是， localScroll有一個准備用於偵聽URL哈希的函數。 這是jQuery.localScroll.hash() 。 因此，您需要先更改哈希，然后調用它：

JavaScript的：

<script>
jQuery(document).ready(function(){
    window.location.hash = "Section-2";
    jQuery.localScroll.hash();
    jQuery('#topnav, #dotLink1').localScroll(3000);
    jQuery('#startbtn, #dotLink2').localScroll(5000);
    jQuery('#dotLink3').localScroll(7000);
    jQuery('#dotLink4').localScroll(9000);
    //.parallax(xPosition, speedFactor, outerHeight) options:
    //xPosition - Horizontal position of the element
    //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
    //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
    jQuery('#top-section').parallax("50%", 0.1);
    jQuery('#Section-1').parallax("70%", 0.3);
    jQuery('#Section-2').parallax("50%", 0.1);
    jQuery('#foot-sec').parallax("50%", 0.1);
});
</script>

這是一個JSBin來展示它的實際效果。 （不要1：1用JSBin代碼替換你的代碼，因為我必須使所有外部JS / CSS /圖像鏈接絕對鏈接到Web上的資源，而不是保留它們的相對鏈接。）

最后但並非最不重要的是，要使工具提示工作，您希望h1元素在您懸停在按鈕上時顯示。 有人可能會認為:hover在h1 ; 然而，由於其當前狀態被隱藏，因此無效。 因此，您的鼠標永遠不會懸停在它上面。 那么有人可能會認為把它放在了a標記，因為那是按鈕; 但是，你將無法使用選擇器從那里定位h1 ，因為a來自h1而不是之前。 因此，當鼠標懸停在其父元素上時，您應該激活h1 ，在這種情況下，它是li 。

CSS：

nav#primary li:hover h1 {
    display:block;
    z-index:9999;
}

這里有新的JSBin。