建网站时如何设计网页顶部菜单随滚动条改变样式

我们平时上网看到许多网站当用户向下拉动垂直滚动条时，网页顶部的导航菜单固定不动，并且加入了不同的样式属性，显得页面浏览非常讲究、非常人性化。建网站时，这些属于前端的范畴，技术上是如何实现的呢？

最简单的实现方法就是使用JQuery，引入库后可以很简单的向网页中某一个样式类中加入或移除CSS类，再加上滚动条的位置判断就可以完成：

<script>
    $(window).scroll(function () {
        //获取滚动条位置
        var top = $(window).scrollTop();
        if(top > 10) {
            //判断滚动条是否拉动，有向下拉就加入active样式
            $('.header').addClass('active');
        } else {
            $('.header').removeClass('active');
        }
    });
</script>

至于要加入或移除什么样子的CSS属性，就看你自由发挥.active样式了。不要忘记在网页顶端引用JQuery库文件，不然没有任何效果。