Question

我的导航栏出现问题，因为我使用脚本来修复其在网站顶部的位置。但导航栏的基本位置不在顶部，因此我将其配置为如果用户向下滚动网站则跳转到顶部。跳到顶端真的很不自然，我需要做得更好。我想让它表现得更自然。

我的实际脚本：

CSS：

#menu {
    text-align: center;
    height: 65px;
    width: 100%;
    z-index: 9999;
    position: fixed; // Here i tried replace it for "relative" but after this change script dont work.
    background-color: #0F1113;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #63842d;
}

.f-nav { // If i change upper css for position relative so i tried used here position: fixed or relative but its still dont work.
    top:0;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
}

使用Javascript：

$("document").ready(function($){
    var nav = $('#menu');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 125) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
});

这个结果有效，但第一次滚动的不自然移动比导航菜单跳到顶部。

我发现并尝试了脚本，但它会破坏我的标题，因为我不知道如何配置我的网站，它只显示我的导航栏，当我向上滚动，但如果我向下滚动我的网站，所以这个导航栏是隐藏下来脚本。

CSS：

body {
    margin: 0;
    padding: 0;
}
.fxdHdr {
    -webkit-transform: translateY(-60px);
    -moz-transform: translateY(-60px);
    -ms-transform: translateY(-60px);
    -o-transform: translateY(-60px);
    transform: translateY(-60px);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.28);
}
header {
    height: 60px;
    background: #d3145a;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -ms-transition: -ms-transform 500ms ease;
    -o-transition: -o-transformtransform 500ms ease;
    transition: transform 500ms ease;
    text-align:center;
    line-height:60px;
}

使用Javascript：

var lastScroll = 0;
var scrollToStick = $("header").height();

$(window).on('scroll', function (evt) {
    var newScroll = $(window).scrollTop();
    $('header').toggleClass('fxdHdr', newScroll > lastScroll && newScroll > scrollToStick);
    lastScroll = newScroll;
});

所以你能帮助我为我的导航栏做一个更自然的动作，因为从第一卷开始从基座位置跳到顶部非常可怕。

我的网站： here

Answer 1

很少有变化

注意：标题高度为160px，您在125px之后添加f-nav类可能会产生故障。这将为您提供顺畅的过渡。

if ($(this).scrollTop() > 160) { nav.addClass("f-nav"); } else { nav.removeClass("f-nav"); }

CSS更改

#menu { text-align: center; height: 65px; width: 100%; z-index: 9999; position: relative; background-color: #0F1113; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #63842d; }

使位置相对并在f-nav类
中添加位置
.f-nav{ position: fixed !important; }

Answer 2

如果您可以或想要使用jQuery-UI，那么.switchClass() - 函数可能就是：

JQuery的

if ($(this).scrollTop() > 50) {
    nav.switchClass( "", "f-nav", 300);
} else {
    nav.switchClass( "f-nav", "", 200);
}

CSS

.f-nav { 
    top:0;
}

<强> Demo

不自然地移动导航菜单

2 个答案: