Team Treehouse 导航栏动画

Question

我正在尝试在 homepage 上滚动时重现导航栏动画的效果。我了解他们如何在使用 Jquery 滚动超过某个阈值时添加类。有任何想法吗？如果我尝试使用不透明度为菜单中的链接设置动画，我的内容要么重叠，如果我使用可见性，它就会移位。

谢谢。

Answer 1

使用此代码。

Css

ul {
    top: 0;
    left: 0;
    margin: 0;
    width: 80%;
    height: 60px;
    position: fixed;
    padding: 10px 10%;
    background: #eeeeee;
    z-index: 1000 ;/* Stay on other layers*/
}
ul li{
    float: right;
    margin: 20px 0 0 5px;
    display: inline-block;
}
ul li a {
    color: #333;
    padding: 13px 20px;
    border-radius: 5px;
    text-decoration: none;
    border: 2px solid transparent;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
ul li:first-child a {
    color: #5fcf80;
    padding: 13px 5px;
}
.scroll li a {
    opacity: 0;
}
.scroll li:first-child a {
    opacity: 1;
    padding: 13px 25px;
    border-color: #68cf89;
}
.scroll:hover li a{
    opacity: 1;
}

Html

<ul>
    <li><a href="#"> Free trial </a></li>
    <li><a href="#"> Sing in </a></li>
    <li><a href="#"> Pricing </a></li>
    <li><a href="#"> Stories </a></li>
    <li><a href="#"> Features </a></li>
</ul>

Jquery IE 有问题

var sn = 0;
$(window).scroll(function () {
    var st = $(this).scrollTop();

    if( st > 100 ){

        if( sn > st){

            $('ul').removeClass('scroll');

        }else{

            $('ul').addClass('scroll');

        }

    } else{

        $('ul').removeClass('scroll');

    }
    sn = st;
});

Jquery 问题已解决

var sn = 0;
var x;
$(window).scroll(function () {
    var st = $(this).scrollTop();

    if( st > 100 && x != 0 ){

        if( sn > st ){

            $('ul').removeClass('scroll');
            x=0;

        }else{

            $('ul').addClass('scroll');
        }

    }else if( st > 100 && x == 0 ){

        if( sn < st ){

            $('ul').addClass('scroll');
            x=1;

        }else{

            $('ul').removeClass('scroll');
        }

    }
    sn = st;
});

Team Treehouse 导航栏动画

Team Treehouse nav bar animation

html

css

navigation

jquery