Question

我的网页顶部有一个粘性导航栏（利用此sticky.js插件：http://stickyjs.com/），在0px的scrollTop位置，其高度为141px。一旦用户垂直向下滚动超过100px，导航的高度在平滑过渡中变为86px。我的问题是，当我向下滚动页面说500px导航高度变化很好，但如果我重新加载页面（不是通过硬刷新），屏幕的位置保持不变，但导航的高度重新加载回141px，一旦滚动> = 1px，导航然后将高度更改为86px。

是否有可能在（非硬）刷新时浏览器检查页面的当前scrollTop位置，然后在实际可见用户之前将粘性导航的高度更改为86px？

这是我的JS：

$(window).load(function() {

        $(window).scroll(function() {

        var scroll = $(window).scrollTop();

        if (scroll >= 100) {
            $('.nav').addClass('smaller');
        } else {
            $('.nav').removeClass('smaller');
        }
        });

    });

这是CSS：

.nav {
    height: 141px;
    z-index: 99999;
    width: 100%;
    background: #ea1593;
    overflow: hidden;
    transition: 0.3s ease-in-out all;
    -webkit-transition: 0.3s ease-in-out all;
}

/* ScrollTop class change for nav height */
.smaller {
    background: #db0e87;
    height: 86px;
}

这是HTML：

<nav class="nav"></nav>

在刷新时检查页面的滚动顶部位置并应用类

0 个答案: