Question

更新：好吧，我已经创建了一个小提示来显示正在发生的事情：fiddle有3个导航，第一个是静态的，后两个应该在该页面到达顶部时淡入。看起来第二个导航似乎有效，但是一旦你开始滚动它们就会触发它们。当你到达第三页时，导航已经消失了。
~~~~~~~~~
一旦用户滚过某个点，我试图淡入标题。 fadeTo正在运行，但它过早触发（在您开始滚动后不久）。这是我的代码：

HTML

<header class="third-page">
    <nav class="contact-nav">
        <img src="resources/img/DoveLogo.svg" alt="Inherent Wellbeing Logo" class="nav-logo">
        <ul class="all-nav main-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
     </nav>
</header>

CSS

.contact-nav {
    display: none;
}

的jQuery

$(function () {
    $(window).scroll(function () {
        var topHeight = $('.contact-nav').height();
        var scroll = $(window).scrollTop();

        if (scroll >= topHeight) {
            $('.contact-nav').fadeTo(1500, 1);
        }
    });
});

非常感谢任何帮助！

Answer 1

1）$('.contact-nav').height()没有给出元素的偏移位置，但它的高度，因此检查.scrollTop不是正确的值。

2）在一个函数中组合.scroll()个函数以减少处理（因为必须根据当前scrollTop检查两个导航栏。因此不需要两个单独的$(function () { ... }) s

3）为什么要使用jQuery的fadeTo()？（在滚动的每个像素上调用它，这是很多处理）而是使用CSS的transition作为导航元素，因此您只需要打开和关闭.show类。

4）nav的设置（CSS）为display:none，这意味着jQuery无法获得其偏移位置。

我编辑了您的小提琴（CSS部分和JS）并添加了注释来解释：https://jsfiddle.net/s34nj6hp/21/

滚动高度太早检测到

1 个答案: