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

来源:建网站  发布时间:2020-07-01  363 次浏览

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

网页顶部导航固定

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


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

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

最新信息
推荐信息
  1. 河南大咖电竞酒店
  2. 河南春怡电气设备有限公司
  3. 在建企业网站时如何正确对待企业关键词
  4. 建企业网站使用什么建站系统简单又好用
建企业网站
建企业网站