javascript - 使用翻译的动画粘性标题

Question

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

这是我的 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 替换你的 javascript:你会得到漂亮的滚动

$(窗口).scroll(函数() {

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");
}

});