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

建网站  时间:2020-07-01  1043 次浏览  建网站顶部菜单固定

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

网页顶部导航固定

最简单的实现方法就是使用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库文件,不然没有任何效果。


本文地址:建网站时如何设计网页顶部菜单随滚动条改变样式 https://www.371jianzhan.com/technical/92.html


上一篇: 网页如何屏蔽常用功能快捷键?

下一篇: 如何自定义网页上文本选取后的背景颜色?

最新信息
推荐信息
建企业网站
建企业网站