Question

我的菜单全部都设置好了，而且我现在拥有的JS没有页面遍布好的地方。我遇到的问题是让我的“固定”导航向上/向下滑动，而不是仅仅突然出现。

目前我所拥有的jQuery是在屏幕上以大约300px的速度激活一个类，这会将菜单位置从相对位置更改为固定位置。

请注意：我最初设法使用静态定位，但是我的网站上的z-index和其他一些元素很难，所以我希望定位保持相对（不是静态的）。我也不想以任何方式使用javascript复制菜单（已经看过一些例子）。

当菜单位置变为固定时，如何使用jquery或css同时实现滑动和滑动效果？

我的代码如下，非常感谢。

HTML：

<div class="nt-main-navigation-sticky">
    <!-- my nav, logo, etc, is in here. -->
</div>

CSS：

.nt-main-navigation-sticky {
    position: relative;
}


.activeScroll .nt-main-navigation-sticky {
    position: fixed;
    top: 0;
    left: 0;
}

JQUERY：

// get my header height
var getHeaderHeight = $('.nt-main-navigation-sticky').outerHeight();


// add/remove body class
$(window).scroll(function() {

    if($(window).scrollTop() > getHeaderHeight + 200) {

        $('body').addClass('activeScroll').css('padding-top', getHeaderHeight);

    } else {

        $('body').removeClass('activeScroll').css('padding-top', 0);

    }

});

Answer 1

向您的css添加转换：

.nt-main-navigation-sticky {
    position: relative;
}


.activeScroll .nt-main-navigation-sticky {
    position: fixed;
    top: -50px; // or whatever the height of the navbar
    left: 0;
    transition: top 600ms;
}

和js：

if($(window).scrollTop() > getHeaderHeight + 200) {

    $('body').addClass('activeScroll').css('padding-top', getHeaderHeight);
    $('.nt-main-navigation-sticky').css('top', '0px'); // will trigger transition

} else {
    $('.nt-main-navigation-sticky').css('top', '-50px'); // will trigger transition
    $('body').removeClass('activeScroll').css('padding-top', 0);

}

相对于固定的位置 - 如何向下滑动？

1 个答案: