页面导航栏在鼠标向下滑动后会漂浮在顶部的设计（已解决）

最新推荐文章于 2024-02-28 07:45:00 发布

梦境工程师-335

最新推荐文章于 2024-02-28 07:45:00 发布

阅读量6.1k

点赞数 9

分类专栏：前端_Javascript 文章标签： javascript css3 html 前端 html5

本文链接：https://blog.csdn.net/qq_41136216/article/details/105776783

版权

本文介绍了一种页面导航栏在鼠标向下滑动后会漂浮在顶部的设计方法。通过设置html和css代码，实现静态网页排版，并使用javascript监听页面滚动事件，当页面滚动超过190px时，导航栏变为固定定位，始终显示在顶部。

摘要由CSDN通过智能技术生成

文章目录

1，动态演示效果图

在这里插入图片描述

2，设置相对定位的静态网页排版

在这里插入图片描述

html代码 >>>

        <div class="container">
            <div class="topDiv">
            <ul>
                <li>导航一</li>
                <li>导航二</li>
                <li>导航三</li>
            </ul>
            </div>
            <div class="disDiv">
                核心技术编辑
                HTML、CSS、JavaScript
                这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，
                HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
                HTML
                指的是超文本标记语言 (Hyper Text Markup
                Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，