Исправлена ​​навигация сверху после прокрутки

Question

У меня возникла такая проблема, что мое навигационное меню имеет плохую фиксированную позицию после прокрутки сайта. Я хочу прокрутить сайт вниз, поэтому мое навигационное меню остается в том же положении. Мне нужно, чтобы это меню оставалось фиксированным наверху после прокрутки.

После первого прокрутки мне нужно это меню, чтобы перейти к началу и быть доступным для следующего прокрутки вниз, но остается фиксированным в верхней части. И если я вернусь назад к базовой позиции веб-сайта, мне нужно, чтобы меню возвращалось в исходное положение (под логотипом, как сейчас).

Мои фактические параметры CSS:

z-index: 9999; 
position: fixed; 

настройки Javascript:

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

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

Но это не работает. Всегда, если я прокручиваю вниз, меню навигации не переместится вверх.

Вы можете увидеть мою проблему: here

Answer 1

Установите ваши первоначальные стили для

#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 { position:fixed !important; top:0; -webkit-transition: height 0.3s // these transitions for give smooth scroll; -moz-transition: height 0.3s // these transitions for give smooth scroll; transition: height 0.3s // these transitions for give smooth scroll; }

Answer 2

Demo

JQuery

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; 
}); 

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; 
}