用於導航菜單的不自然移動

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-導航類。這會讓你順利過渡。

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，一個possibilty將是.switchClass() -function：

JQuery的

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

CSS

.f-nav { 
    top:0; 
} 

Demo