固定导航栏，损坏 Javascript

Question

我目前正在一个网站上工作，我正在尝试让 scrolling/fixed 导航栏正常工作。我要离开 this tutorial，但我不能像他的预览那样让我的 in/out 褪色。除了把我的电脑扔到墙上，我已经尝试了所有我能想到的方法。我知道的不多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

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

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

Answer 2

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

固定导航栏，损坏 Javascript

Fixed Nav Bar, Broken Javascript

html

javascript

jquery

fixed

nav