固定导航栏，破损的Javascript

Question

我目前正在为一个工作网站工作，我试图让一个滚动/固定的导航栏工作。我要走this tutorial，但我无法像他的预览一样让我的画面淡入淡出。我尝试了所有我能想到的将我的电脑扔在墙上的东西。我不太了解Javascript，所以这只会增加挫折感。

我发布了代码here的预览，并列出了下面代码的JavaScript部分。任何和所有的帮助，将不胜感激。

$(document).ready(function(){ 
    $('#navigation a, #fixedbar a').on('click', function(e) { 
    e.preventDefault(); 
    }); 

    $(window).on('scroll',function() { 
    var scrolltop = $(this).scrollTop(); 

    if(scrolltop >= 110) { 
     $('#fixedbar').fadeIn(100); 
    } 

    else if(scrolltop <= 110) { 
     $('#fixedbar').fadeOut(100); 
    } 
    }); 
}); 

---

@charset "UTF-8"; 
/* CSS Document */ 

/*BASICS*/ 
*{ 
    padding: 0px; 
    margin: 0px; 
} 
body { 
    margin: 0px !important ; 
} 
html{ 
/* background-image: url(parts/bg5.png); 
    background-repeat: repeat; 
    background-attachment: fixed; */ 
    background-color: #D1DEF2; 
} 
header, section, footer, aside, nav, main, article, figure { 
    display: block; 
} 

/*HEADER*/ 
header { 
    width: 100%; 
    height: 110px; 
    position: absolute; 
    background-color: #fff; 
    margin: -110px auto 0px; 
    z-index: 50; 
} 
    header #header-content{ 
     width: 1024px; 
     margin: auto; 
    } 
    header #headlogo{ 
     width: 306px; 
     height: 81px; 
     background-image:url(parts/header/logo.png); 
     background-position: center; 
     margin: 21px 0px 25px 32px; 
     background-repeat: no-repeat; 
     -webkit-transition: background-position 1s ease; 
       transition: background-position 1s ease; 
    } 

/* NAV */ 
nav{ 
    margin: 10px auto 0px; 
    width: 100%; 
    height: 64px; 
    background-color: #ffffff; 
    border-bottom: 1px solid #445476; 
    box-shadow-bottom: 0px -1px 5px #212B44; 
    -webkit-transition: all 1s ease; 
      transition: all 1s ease; 
    postition: absolute; 
    z-index: 100; 
    margin-top: 110px; 
} 
    nav .nav-content{ 
     width: 1024px; 
     margin: 0px auto; 
    } 
    nav .navmain{ 
     margin: 30px 154px 0px; 
     position: absolute; 
    } 
    #navigation{ 
     z-index: 10; 
    } 
    nav #end-leftnav{ 
     margin-right: 36px; 
    } 
    nav #start-rightnav{ 
     margin-left: 123px; 
    } 
    nav ul{ 
     list-style-type: none; 
     text-decoration: none; 
     font-family: "Cabin Condensed", sans-serif; 
     font-weight: 700; 
     color: #585858; 
    } 
    nav li{ 
     float: left; 
    } 
    nav .navspot{ 
     padding: 0px 5px 3px; 
     color: inherit; 
     margin: 0px 17px; 
     color: #585858; 
    } 
    nav .navspot:hover{ 
     border-bottom: 3px solid #445476; 
    } 
    nav .navsoc{ 
     margin-left: 27px; 
    } 
    nav .navsoc img{ 
     float: left; 
     margin: 0px 3px 10px; 
     opacity: 1; 
     transition: opacity 1s; 
     -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */ 
    } 
    nav .navsoc img:hover{ 
     border-bottom: 0px; 
     opacity: .6; 
     transition: opacity 1s; 
     -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */ 
    } 
    nav #columncircle{ 
     margin: -30px auto 0px; 
     float: left; 
     clear: both; 
     position: absolute; 
    /* border-radius: 100%; 
     box-shadow: 2px 2px 1px #333333; 
     background-color: #445476; */ 
    } 

    /* FIXED NAV EXCLUSIVE */ 
    #fixedbar { 
     display: none; 
     position: fixed; 
     width: 100%; 
     height: 65px; 
     z-index: 100; 
     margin-top: -110px; 
    } 
    #fixednav { 
     display: block; 
     margin: -500px 0px 0px; 
     padding: 0px auto; 
     opacity: 1; 
     width: 100%; 
    } 
    nav .navfixed{ 
     margin: 35px 154px 0px; 
    } 

#filler{ 
    margin-top: 1000px; 
    z-index: 1; 
} 

Answer 1

您fadeIn/fadeOut功能是非常快的。

改变它的速度

$(document).ready(function(){ 
    $('#navigation a, #fixedbar a').on('click', function(e) { 
    e.preventDefault(); 
    }); 

    $(window).on('scroll',function() { 
    var scrolltop = $(this).scrollTop(); 

    if(scrolltop >= 110) { 
     $('#fixedbar').fadeIn(250); 
    } 

    else if(scrolltop <= 110) { 
     $('#fixedbar').fadeOut(250); 
    } 
    }); 
}); 

Answer 2

#navigation 
    left: 0 
    top: 0 
    z-index: 10 
    position: fixed 

<body style="margin-top:(height of the navigation bar)px">