页面滚动时，实现顶部导航栏的显示与隐藏（使用jQuery和JavaScript）

技术驱动者

于 2023-09-26 16:35:07 发布

阅读量890

点赞数

CC 4.0 BY-SA版权

文章标签： javascript jquery 前端 js

本文链接：https://blog.youkuaiyun.com/CodeWhizZ/article/details/133314911

js 专栏收录该内容

505 篇文章 ¥59.90 ¥99.00

订阅专栏

本文详细介绍了如何通过jQuery和JavaScript在页面滚动时改变顶部导航栏的显示与隐藏状态。首先引入jQuery库，接着创建HTML和CSS布局，然后编写JavaScript代码监听滚动事件，根据滚动距离调整导航栏的显示。最后，将所有代码整合并测试，实现导航栏的动态效果。

在网页设计中，经常需要在页面滚动时对顶部导航栏进行样式或行为的改变。一种常见的需求是，在页面滚动到一定位置时，顶部导航栏固定在页面顶部并显示，而在页面顶部时则隐藏。本文将介绍如何使用jQuery和JavaScript来实现这一效果。

首先，我们需要引入jQuery库。可以通过以下方式从官方网站下载并引入jQuery库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

技术驱动者

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

js和css3智能隐藏和显示的顶部导航菜单

12-11

这是一款使用js和css3制作的智能隐藏和显示的顶部导航菜单。该顶部导航菜单在页面向下滚动时可以帧动画隐藏，在向上滚动到一定距离时优惠显示出来。

很好用的JS左侧导航菜单，滑过显示，移开隐藏

11-25

很好用的JS左侧导航菜单，滑过显示，移开隐藏很好用的JS左侧导航菜单，滑过显示，移开隐藏

参与评论您还未登录，请先登录后发表或查看评论

纯JS实现页面滚动至顶部并自动显示或隐藏

纪风夜影

06-22

6224

**博主最近在试着写一些简单的JS组件，一方面锻炼自己的JS功底，另一方面也为将来JS组件复用打好基础** 我们在浏览网页时常常看到这样的JS组件这个是优快云博客的返回顶部按钮，这种按钮是瞬间回到页面顶部，到页面顶部后的消失也是立马消失，而我们今天要写的是逐步返回至顶部，并逐步消失，在页面往下拉后，按钮也是逐步出现。

导航栏（javascript和jQuery）

吃豆子的小新新的博客

05-30

283

用原生JavaScript和JQuery两种写法实现点击导航栏切换效果 html代码 <nav id="nav"> <ul> <li><a href="javascript:void(0);">首页</a></li> <li><a href="javascript:void(0);">第二页</a></li> <li>&l

JQ顶部导航根据滚动条滚动方向显示和隐藏

huang_rui_min的博客

06-07

247

【代码】JQ顶部导航根据滚动条滚动方向显示和隐藏。

通过uc.js实现pc firefox页面向下滚动自动隐藏导航栏，复刻firefox移动版的丝滑体验

深夜听表

08-14

1190

1、将上面源码environment文件夹内的zip文件下载下来，其中fx-folder.zip解压复制到firefox的安装目录，另一个utils_scripts_only.zip待会再操作。3、点击打开文件夹按钮后就打开了firefox配置文件夹，然后在此新建个“chrome”名字的文件夹，将utils_scripts_only.zip解压复制到chrome，2、打开firefox配置文件夹，打开路径：菜单>帮助>更多排障信息，之后再找到配置文件夹一栏中的打开文件夹按钮，...

利用JS实现悬浮导航的隐藏和显示

JSZY-YYDS的博客

05-27

3751

利用JS实现悬浮导航的隐藏和显示 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： DW和JavaScript 作者：韩日九儿撰写时间：2021/5/27 一.实现悬浮导航隐藏和显示的思路。 1.你如果想实现某元素的隐藏和显示，那么就要设置某元素的定位才可以实现。 2.下面是实现悬浮导航隐藏和显示的css样式，其中id为#navbg的元素我给了它固定位。

Jquery笔记--滚动条移动，导航条显示隐藏和响应式。

诺曼待

06-26

2644

相信有很多人在写前端特效的时候时候会遇到滚动条监测导航的问题，也就是当页面被拉动到某个位置的时候导航条显示出现。到顶部的时候导航条又是另一种效果方式呈现，那时候我研究了这个问题大概花了几天的时间，后来把他实现出来了。然后为了简洁操作我把它封装成了Jquery的第三方扩展包。并添加上了类似于现在的响应式，因为是使用JS侦测的。相比于css3的media属性来说，兼容性相对较好。这里面解决

JavaScript实现下拉菜单的显示和隐藏

11-26

我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 3)DOM编程：getElementsByTagName()方法。那么接下来就是我们制作的流程： 1)隐藏二级菜单：设置CSS样式,让二级菜单隐藏。 2)编写显示子菜单showsub()函数：使用getElementsByTagName获取二级菜单项；通过style.display设置二级菜单显示。 3)编写隐藏子菜单hidesub()

html 滚动隐藏导航,[jQuery]滚动隐藏或显示顶部导航菜单

weixin_31140599的博客

06-04

679

现在大部分导航菜单在顶部的网站都会采用固定的形式，不管页面怎么滚动，菜单始终会固定在顶部。而下面这个方法比较灵活，当你向下滚动页面时，导航菜单是不固定的，当你向上滚动时导航菜单就会显示出来了。这个效果在Bigfa的站里面也用上了，可以点击去看看。下面是实现方法，非常简单。步骤一加载jQuery库(一般现在的主题都已经有了，没有的话按下面第一行来挂载)和scroll-up-bar.min.js脚本到...

利用JQuery实现顶部导航栏功能

xw1985520的博客

12-26

3740

今天给大家介绍一下，如何利用jQuery实现顶部导航栏功能。其实原理很简单就是利用css和JQuery样式选择器实现的。下面举个例子具体介绍一下如何这些功能，案例如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

网页设计导航栏的显示和隐藏功能

IT博客

09-23

1822

我们在前端开发当中想要页面滚动到某个位置的时候显示和隐藏。在初步的学习者搞不懂怎么样实现这样的功能，这下来我们看看这么样实现导航栏的显示与隐藏功能。

jquery固定在顶部的导航菜单

xiaozhen0610的博客

07-07

346

体验效果:http://hovertree.com/texiao/jquery/6.htm 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> <m...

js 使导航栏始终位于顶部

weixin_40087279的博客

08-02

1398

代码如下： &lt;div class="menuEn" id="navigation" style="width: 100%"&gt; &lt;div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"&gt; &l

菜单页面隐藏和显示（JS）

qq_47997447的博客

10-21

1671

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜单显示和隐藏</title> <style> * { margin: 0; padding: 0; } body { width: 100vw; height: 100vh; } .

react页面滚动时导航栏的显示与隐藏

会一点点前端

11-01

1611

代码主要实现了导航栏跟随页面显示隐藏，页面向下滚动时导航栏消失，向上滚动导航栏显示，这个可以动态的去调整。

js实现页面滚动显示和隐藏顶端固定导航

weixin_30550271的博客

02-25

541

$(function(){ //下面我们需要开发用户滚动时，当滚动向下一定距离，展示这个隐藏的顶端固定导航 $(window).scroll(function(){ //在window的滚动回调方法中，我们处理具体逻辑 var scrollTop　=　document.documentElement.scrollTop || documen...

js导航制作（纯js，带有隐藏和显示的滑动效果）

qq_43004431的博客

01-28

2098

js 导航制作

html5向上向下滚动隐藏头部,div 下上滑动 (隐藏/显示)

weixin_35339622的博客

06-04

1380

div 上下滑动 (隐藏/显示)function changeDivDown(){//此为向下展开div的方法var d = document.getElementById("TLDiv");var h = d.offsetHeight;var maxh=250;function dmove(){h+=5;//展开的速度if(h>=maxh){d.style.height='250px';c...

Bootstrap实现顶部导航栏随页面滚动显示与隐藏

资源摘要信息:"Bootstrap顶部浮动导航菜单页面滚动显示隐藏.zip"是一个包含了Bootstrap框架应用的前端开发资源包，主要用途是实现一个在页面顶部浮动的导航栏，该导航栏能够在用户进行页面滚动时自动隐藏和显示。...