关于网站导航样式实现

Question

本人小白一个，想请教各位导航在图片上呈现透明效果，然后往下拉滚动条的时候
导航的背景就可以变成白色的了，我知道用position的fixed可以实现导航固定，
但还是不知道这个效果具体是怎么实现的。想请教一下各位，如有解答十分感谢！

            问题参考网址：

            http://www.uileader.com/index.html
            http://www.alloyteam.com/
            （_绝对没有要推网址的意思，只是这两个网站都有这个效果，如果我没说清楚上面
            的问题，可以看一下它们这个页面，我就想知道最上方的导航效果是怎么实现的_）

Answer 1

以http://www.alloyteam.com/ 为例子 我来给你做出详细解答

这是这个网站导航条的样式 它并没有设置背景颜色，只是因为固定定位，导航条在网页不占空间，使得它悬浮在下面轮播图的上方，所以给人视觉一种透明效果；

接下来就是监测滚动条，你会发现滚动条滚动就会在原来的基础上新加了个类 header-scrolled

而这个类的样式如下图

给设置了背景色白色，而且padding值也改变了 ，注意看之前.header 的样式，是设置了这个-webkit-transition: all .4s ease-in-out；CSS3动画的，所以在padding改变时候会有动画过度；

$(window).scroll(function () {
        //$(window).scrollTop()这个方法是当前滚动条滚动的距离
        // 获取滚动的高度
        var scrollHeight=$(window).scrollTop();
        if(scrollHeight > 0){
            $("header").addClass("header-scrolled");
        }
        if(scrollHeight == 0){
            $("header").removeClass("header-scrolled");
        }
});

希望采纳，只是监测滚动条，增加删除header-scrolled类，而动画过度是header写了CSS3动画样式，由于新增header-scrolled加了背景色和改变的padding值，出现的对应的效果