CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Radek Tarant
Radek Tarant

Reputation: 227

Unnatural move for navigation menu

I have a problem with my navigation bar because I am using a script to fix its position on top of the site. But base position for navigation bar isn't on top, so I configured it to jump to the top if the user scrolls the website down. This jump to top is really unnatural and I need to make it better than that. I want to make it behave more natural.

My actually scripts:

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

This result work but with unnatural move for first scroll than navigation menu jump to top.

I find and tried down script but it destroy my header because i dont know how to configurate for my website and it show my navigation bar only when i scroll up but if i scroll down my website so this navigation bar was hide with down script.

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

So can you help me make a more natural movement for my navigation bar because jump from base position to top from first scroll is really horrible.

My website: here

Upvotes: 0

Views: 55

Answers (2)

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

Few changes to be made

Note: Header height comes to be 160px and you are adding f-nav class after 125px that may create glitch. This will give you smooth transistion. 

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

CSS CHANGES

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

make position relative and add position in f-nav class

.f-nav{
position: fixed !important; 
}

Upvotes: 2

empiric
empiric

Reputation: 7878

If you can or want to use jQuery-UI, one possibilty would be the .switchClass()-function:

JQuery

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

CSS

.f-nav { 
    top:0;
}

Demo

Upvotes: 0

Related Questions