1

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

4

1 回答 1

3

因此，显然有效的方式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>

最后，您应该onload从标签中删除您的属性，body并将您想要在加载文档时运行的任何内容放入 jQueryjQuery(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/图像链接成为网络上资源的绝对链接，而不是保持它们的相对链接。）

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

CSS：

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

新的 JSBin 在这里。

于 2013-10-07T13:10:53.840 回答