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

#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

2 个答案: