滚动后将导航栏返回到原始位置

时间:2015-09-06 07:54:15

标签: javascript jquery html css

我已设置此页面,以便当您滚动浏览导航栏的顶部时,它会变得粘滞并保持在页面顶部。

当您滚动回页面顶部时,我希望它返回到原始位置。

这是我现在所做工作的CodePen。我应该如何更改jQuery以使其恢复到原来的位置?

$(window).on('scroll', function () {

    var $header = $("#header"),
        scrollTop = $(window).scrollTop(),
        elementOffset = $header.offset().top,
        distance = (elementOffset - scrollTop);

    if (distance < 0) {
        $header.css({
            "position": "fixed",
            "top": "0px",
            "left": "0",
            "right": "0"
        });
    }
});

现在,当用户向下滚动页面时,这就是我将标题元素更改为固定元素的方式。

1 个答案:

答案 0 :(得分:1)

以另一种方式思考解决方案:

<强> CSS

.affix {
    position:fixed;
    top:0;
    left:0;
    right:0;
}

<强> JS

if (distance < 0) {
    $header.addClass("affix");
} else {
    $header.removeClass("affix");
}