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

Question

我买了一个与 Bootstrap 一起使用的模板，因为我有点赶时间，我想稍微编辑一下它，让它做我想做的事。我创建了一个带有工具提示的垂直菜单，但没有显示工具提示。当我在另一个文件中使用完全相同的代码时，它工作得很好，所以我认为有什么东西阻止了它，但我不知道为什么。有人知道吗？

Answer 1

所以，显然 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>

最后，您应该从 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>

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.