Question

我已经构建了我将用于我的网站标题的原型，它基本上是一个简单的导航，滚动重新出现在屏幕上的固定位置（粘性导航）。我首先通过在标记中添加两个标记来实现这一点，但理想情况下，我只能使用一个标记来实现这一点。

这是我的codepen

如果你慢慢向下滚动，你应该看看我在这里想要达到的目标。继承人我的javascript：

$(window).scroll(function() {

    if ($(this).scrollTop() > 60){  
        $('.main-header').addClass("sticky-header");
    }
    else{
        $('.main-header').removeClass("sticky-header");
    }

    if ($(this).scrollTop() > 160){  
        $('.main-header').addClass("sticky");
    }
    else{
        $('.main-header').removeClass("sticky");
    }
});

使用稍微不同的方法可能有更好的方法来实现这一目标吗？我不喜欢我测试滚动顶部的两个实例的事实，只是这样做是因为首先我需要一种方法来应用标题的定位，应用边缘值来进行时髦的过渡，就好像它从页面顶部向下移动。

Answer 1

用以下内容替换你的javascript：你会得到很好的滚动

$（window）.scroll（function（）{

if ($(this).scrollTop() > 0){  
    $('.main-header').addClass("sticky-header");
}
else{
    $('.main-header').removeClass("sticky-header");
}

if ($(this).scrollTop() > 160){  
    $('.main-header').addClass("sticky");
}
else{
    $('.main-header').removeClass("sticky");
}

}）;

使用翻译的动画粘贴标题

1 个答案: