javascript - Bootstrap视差工具提示和平滑滚动

我买了一个可以与Bootstrap一起使用的模板，因为我有点着急，我想对其进行一些编辑以使其能够完成我想做的事情。我创建了带有工具提示的垂直菜单，但没有显示工具提示。当我在另一个文件中使用完全相同的代码时，它可以很好地工作，因此我认为有些东西阻止了它，但我不知道为什么。有人有线索吗？

最佳答案

因此，显然the way localScroll works是您需要在包含将滚动到指定位置的链接的元素上指定滚动属性。因此，您将希望将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>

最后，应该从onload标记中删除body属性，并将要在文档加载时运行的所有内容放入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>

Here is a JSBin to show it in action.（不要用JSBin代码1：1替换您的代码，因为我必须使所有外部JS / CSS /图像链接成为Web资源的绝对链接，而不是保持它们的相对链接。）

最后但并非最不重要的一点是，要使工具提示起作用，您希望在将鼠标悬停在按钮上时显示h1元素。可能会想到将:hover放在h1上。但是，由于当前状态为隐藏状态，因此无法正常工作。因此，您的鼠标永远都不会悬停在它上面。然后可能会想到将其放在a标记上，因为这是按钮；但是，由于h1在a之后而不是之前，因此您将无法使用选择器从那里定位h1。因此，当鼠标悬停在其父元素（在本例中为h1）上方时，应激活li。

CSS：

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

New JSBin here.