今天和大家分享一下如何制作网站顶部导航条随滚动条上下滑动而固定悬浮效果

导航条默认样式属性值:
.sliddown {
    position: fixed;
    top: -120px;
    left: 0;
    width: 100%;
    height: 90px;
    font-size: 12px;
    box-shadow: 0 0 5px #888;
    z-index: 100000;
}

也就是在访问该页面时，固定导航条是在浏览器可视区域的顶部-120px的位置，当滚动条滑动到与浏览器的顶部大于某一段距离时，则给该导航条的top属性值设置成0，显示出来，否则设置

成-120，隐藏。这个过程我们需要通过js的scroll滑动事件进行简单的封装处理。

定义方法:
scrollDown = function(param){
    $(window).scroll(
        function(){
            var w_scrolltop=$(window).scrollTop(); // 滚动条与浏览器顶部的距离
            if(w_scrolltop >= param.topHeight[0]){
                $(param.el).addClass(param.toggleClass[0]).css({'top': '0'});
                $(param.hideClass).addClass("hide");
            }
            else{
                $(param.el).removeClass(param.toggleClass[1]).css({'top': param.topHeight[1]});
                $(param.hideClass).removeClass("hide");
            }
        }
    )
}; 

调用的方法:
scrollDown({
    el: '.sliddown', //document元素对象
    topHeight: [h,-h], //滚动条距离顶部的高度位置，元素滑动显示和隐藏
    toggleClass: ["movedown", "movedown"], //元素显示和隐藏类样式
    hideClass: ".head-nav",
    callback: function (){
        //自定义执行的回调函数
    }
});