headroom.js没效果

[E-Think]

http://www.daxueit.com/article/3728.html

我复制了该案例的代码。在测试的时候发现效果没出来。

CSS加载没问题，JS位置也没问题。headroom.js也加载进来了。效果就没出来？

我使用F12查看代码时，官网会根据滚动事件添加相应的样式。

但是我的案例滚动窗口后，样式没反应。而且也没有提示代码错误

请问各位大神测试下，你们能出效果嘛？

[cocotsau]

它的Demo界面有效果：http://www.bootcss.com/p/headroom.js/ 另附 CSS3和jquery结合的仿headroom.js效果，写的有点乱 CSS部分

@keyframes slideDown{
    from{top: -60px; opacity: 0;}
    20%{top: -48px; opacity: .2;}
    40%{top: -36px; opacity: .4;}
    60%{top: -24px; opacity: .6;}
    80%{top: -12px; opacity: .8;}
    to{top: 0px; opacity: 1;}
}
@keyframes slideUp{
    from{top: 0px; opacity: 1;}
    20%{top: -12px; opacity: .8;}
    40%{top: -24px; opacity: .6;}
    60%{top: -36px; opacity: .4;}
    80%{top: -48px; opacity: .2;}
    to{top: -60px; opacity: 0;}
}
.slideUp{animation: slideUp .3s ease-in-out;}
.slideDown{animation: slideDown .3s ease-in-out;}
.navbar-fixed-top.slideUp{position: fixed; top: -60px;}
.navbar-fixed-top.slideDown{position: fixed; top: 0px;}
.navbar-fixed-top{
    position: fixed;
    top: 0;
    height: 60px;
    width: 100%;
    background-color: #06343C;
}

html部分

<div class="navbar-fixed-top"></div>
<div style='height: 2000px; width: 100%;'></div>
<div style='text-align: center;'>我在底部</div>

jquery部分

$(function() {

    var currTop = 0, //当前位置
        initTop = 0; //初始位置

    $(window).scroll(function() {
        currTop = $(window).scrollTop();
        if (initTop > currTop && currTop <= 300 && initTop > 300)
        //判断滚动条运动方向，初始位置值 > 当前当前位置  && 滚动条位置<=300 && 初始位置大于300
            $('.navbar-fixed-top').removeClass('slideUp').addClass('slideDown');
        if (currTop > 300)
        //滚动条位置 > 300
            $('.navbar-fixed-top').removeClass('slideDown').addClass('slideUp');

        setTimeout(function() {initTop = currTop}, 0);
    })
});

[叨逼叨]

同问 我也遇到了同样的问题

[E-Think]

我是这样解决的，通过官网下载了压缩版的js。效果就过来了。中文网那个下载失效了。 附上英文网地址：http://wicky.nillia.ms/headroom.js/

[liveangela]

引用 3 楼 xingxiu0708 的回复:

我是这样解决的，通过官网下载了压缩版的js。效果就过来了。中文网那个下载失效了。 附上英文网地址：http://wicky.nillia.ms/headroom.js/

多谢这位兄弟，我是在git上面下载，用Headroom.js没有效果（连类名都没有加上） 后来换成上面这个压缩版的，类名一下子就出来了 一万个赞