自动悬浮于顶部的固定菜单 — 可以实现新浪微博顶部导航菜单一样的效果

最新推荐文章于 2023-07-19 16:23:43 发布
原创 最新推荐文章于 2023-07-19 16:23:43 发布 · 90 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #javascript #xhtml #前端 #开发语言

本文详细介绍了如何实现网页顶部固定菜单，并通过JavaScript监听滚动事件动态显示菜单，提升用户体验。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>顶部固定菜单</title>
<style type="text/css">
*{ margin:0; padding:0;}
.nav-wrapper-fixed{ position:fixed; top:0; width:100%;}
.nav-wrapper-fixed .nav{width:960px; margin:0 auto;}
.nav-wrapper-fixed .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;}
.nav-wrapper{ margin-top:100px; width:100%;}
.nav-wrapper .nav{width:960px; margin:0 auto;}
.nav-wrapper .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;}
</style>
<script type="text/javascript">
window.onload=function(){
    var nav=document.getElementById('nav');
    var navFixed=document.getElementById('navFixed');
    window.onscroll=function(){
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        document.title=scrollTop
        if(scrollTop>nav.offsetTop){
            navFixed.style.display='block';
        }else if(scrollTop<nav.offsetTop){
            navFixed.style.display='none';
        }
    }
};
</script>
</head>
<body style="height:2000px;">
<div class="nav-wrapper">
    <div class="nav" id="nav">
        <ul>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
        </ul>
    </div>
</div>
<div class="nav-wrapper-fixed" id="navFixed" style="display:none;">
    <div class="nav" id="nav">
        <ul>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
        </ul>
    </div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>顶部固定菜单</title> <style type="text/css"> *{ margin:0; padding:0;} .nav-wrapper-fixed{ position:fixed; top:0; width:100%;} .nav-wrapper-fixed .nav{width:960px; margin:0 auto;} .nav-wrapper-fixed .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;} .nav-wrapper{ margin-top:100px; width:100%;} .nav-wrapper .nav{width:960px; margin:0 auto;} .nav-wrapper .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;} </style> <script type="text/javascript"> window.οnlοad=function(){ var nav=document.getElementById('nav'); var navFixed=document.getElementById('navFixed'); window.οnscrοll=function(){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; document.title=scrollTop if(scrollTop>nav.offsetTop){ navFixed.style.display='block'; }else if(scrollTop<nav.offsetTop){ navFixed.style.display='none'; } } }; </script> </head> <body style="height:2000px;"> <div class="nav-wrapper"> <div class="nav" id="nav"> <ul> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> <li>菜单四</li> <li>菜单五</li> </ul> </div> </div> <div class="nav-wrapper-fixed" id="navFixed" style="display:none;"> <div class="nav" id="nav"> <ul> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> <li>菜单四</li> <li>菜单五</li> </ul> </div> </div> </body> </html>

珊瑚贝
关注
Ubuntu16.04安装了anaconda3之后使用Geany导入Numpy， tensorflow显示“No module named xxx”解决办法
m0_37990492的博客
07-08 1839
Ubuntu16.04安装了anaconda3之后使用Geany导入Numpy， tensorflow显示“No module named xxx”解决办法 安装Geany的方法： 打开终端 sudo apt-get install geany 首先确保在终端进入python的情况下能够导入这些包， 否则请看我的另一篇文章， 看看能否解决问题 在终端可以成功导入则打开Geany #我这里的版本是1...
Geany美化配置文件
11-09
- `geany.conf`：这是Geany的主要配置文件，包含了各种设置，如编辑器字体、背景色、语法高亮、自动完成、编码方式等。通过修改此文件，你可以调整Geany的整体行为。 - `keybindings.conf`：这个文件定义了Geany中...
Geany配置python虚拟环境（Anaconda）
qq_44614636的博客
07-19 1580
Geany配置python虚拟环境（Anaconda）
Ubuntu16.04+Anaconda+Geany配置
yxl564710062的博客
12-14 1768
设置环境设置系统环境变量$ sudo gedit /etc/environment 然后在结尾处添加：安装路径（:/opt/pycharm/bin) $ source /etc/environment设置当前用户环境变量$ sudo gedit ~/.bashrc 在结尾处添加：export PATH="/opt/pycharm/bin:$PATH" $ source ~/.bashrc 设置gea
Ubuntu 下安装类似记事本的工具Geany
weixin_45920624的博客
02-26 1299
记事本工具。
树莓派Ubuntu22.04安装Geany1.36
m0_45906029的博客
07-28 428
树莓派Ubuntu22.04安装Geany1.36
利用anaconda配置多版本python环境
steven_one7的博客
04-23 331
https://www.jianshu.com/p/d2e15200ee9b一. 安装conda，并检测是否安装完成conda --version二.新建空间whj，python版本为2/3conda create -n whj3 python=3conda create -n whj2 python=2.7三.激活whj1环境Linux：source activate snowflakeswin...
Ubuntu Linux下配置GCC编译环境详解
"在Ubuntu Linux系统中设置GCC编译环境的步骤和基础知识，包括安装必要的软件包，使用GCC编译C程序以及理解编译器警告选项的作用。" 在Ubuntu Linux操作系统中，GCC（GNU Compiler Collection）是用于编译C、C++、...
python编译环境的配置anaconda
03-08
以上配置使得在 Geany 内部可以直接调用 Anaconda 提供的 Python 来编译或运行脚本。 #### 多版本共存方案 考虑到有时可能需要同时维护多个不同版本的 Python 环境，通过 Anaconda 能够非常便捷地达成这一目标。...
如何在 Geany 中配置 Python 开发环境？
最新发布
07-10
### 在 Geany 中设置 Python 开发环境的配置指南 在 Linux 系统中，Geany 是一个轻量级但功能强大的集成开发环境（IDE），非常适合用于 Python 开发。以下是如何在 Geany 中配置 Python 开发环境的详细步骤： ####...
Ubuntu中Geany的简单教程C
10-13
可能大家对于ubuntu下的编程开发工具不是很熟悉,就找了这个Geany的编写C语言的教程.分享给大家!~
Ubuntu开发工具Geany编写C++简单教程
10-13
关于Geany编写C++的简单教程,希望对各位有所帮助
Ubuntu14.04.1中安装Anaconda4.3.0
yanxiaopan的博客
03-07 604
1.下载Anaconda4.3.0 在Ubuntu14.04.1中安装Anaconda4.3.0，对应python3.6版本， 官方下载地址：https://www.continuum.io/downloads 因在官方下载太慢，我下载以后分享一个连接，下载比较快，供大家方便下载，连接如下： http://pan.baidu.com/s/1dE39vl3 2.安装 教程参考：http:/
Ubuntu 20.04.2.0 LTS 下安装Geany 1.36的命令列表
hnjzsyjyj的专栏
07-29 575
【命令列表】 sudo apt-get install aptitude sudo aptitude install geany sudo aptitude install g++ 依序输入上述三条命令，可在Ubuntu 20.04.2.0 LTS 环境下完美配置好Geany 1.36。 利用 sudo aptitude install ... 命令的优势在于能够自动解决安装包间的依赖关系，会自动选择相应版本的安装包进行下载安装。 ...
Opencv安装以及环境配置
a_growing_tree的博客
12-16 3130
说在前面：呃我是跟着B站的课程学习视频（opencv入门教程第一节课就是介绍怎么装的）装的，看着老师一波操作下去十分流畅，以为挺好装的，没想到还是遇到各种坑…只能说现在更新换代的速度太快了，有些东西跟不上时代的变换（就比如说老师的视频），说到底还是得自己慢慢摸索、踩坑… 话不多说我们直接开始吧 前期还是十分建议跟着老师装一下Anaconda（全家桶，直接一次性下载好python、opencv、Jupyter Notebook、spyder等等）参考视频：opencv入门教程 具体步骤：进入anaconda官
python编辑器选择
YBK233
05-16 2498
一、Linux环境和Windows环境下 个人推荐推荐使用geany，个人认为这个编辑器优于pycharm，pycharm破解起来异常麻烦，而且它体积小，能够运行几乎所有的程序（而无需终端来运行）。也可以选择anaconda作为geany当做python的编辑器 Linux中安装的命令如下：sudo apt-get geany windows中，可以点击链接https://www.geany.or...
解决乌班图（Ubuntu）系统已经装好了python的各种包，Geany开发环境检测不到的问题
xigewang_的博客
12-18 5739
最近本人想在乌班图系统里运行一个python的小脚本，用的是Geany开发环境，运行之后弹出下面的提示： 提示我说“No module named numpy”，就是告诉我没有安装numpy的包。我想没安装那就装呗，反正在乌班图系统里安个python的包挺容易的。 我就打开了终端，输入“pip install numpy”，结果如下： 我擦，弹出来的提示告诉我已安装numpy
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值