jQuery滚动顶部固定导航菜单

最新推荐文章于 2020-06-26 15:06:45 发布
最新推荐文章于 2020-06-26 15:06:45 发布
阅读量902 收藏 2
点赞数
文章标签： jQuery 导航菜单栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Showing_abc/article/details/83066153
版权

jQuery滚动顶部固定导航菜单

图片效果如下：
在这里插入图片描述

index.html

var foo = 'bar';

// An highlighted block
var foo = 'bar';
<!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=utf-8" />
<title>jQuery滚动顶部定位导航菜单</title>

<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

</head>
<body style="height:1800px;">

	<br />

	<div class="navbg">
		<div class="col960">
			<ul id="navul" class="cl">
				<li class="navhome"><a href="#">HOME</a></li>
				<li>
					<a href="#">Html</a>
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">HTML5</a></li>
					</ul>
				</li>
				<li>
					<a href="#">CSS</a>
					<ul>
						<li><a href="#">CSS入门</a></li>
						<li><a href="#">CSS工具</a></li>
						<li><a href="#">CSS技巧</a></li>
						<li><a href="#">CSS实例</a></li>
						<li><a href="#">CSS3</a></li>
						<li><a href="#">CSS hack</a></li>
						<li><a href="#">CSS2.0 手册</a></li>
					</ul>
				</li>
				<li>
					<a href="#">网页特效</a>
					<ul>
						<li><a href="#">导航菜单</a></li>
						<li><a href="#">表单按钮</a></li>
						<li><a href="#">表格图层</a></li>
						<li><a href="#">图片特效</a></li>
						<li><a href="#">滚动特效</a></li>
						<li><a href="#">文字特效</a></li>
						<li><a href="#">时间日期</a></li>
						<li><a href="#">窗口特效</a></li>
						<li><a href="#">鼠标特效</a></li>
					</ul>
				</li>
				<li>
					<a href="#">前端资讯</a>
					<ul>
						<li><a href="#">用户体验</a></li>
						<li><a href="#">前端观察</a></li>
						<li><a href="#">职业生涯</a></li>
					</ul>
				</li>
				<li>
					<a href="#">前端技巧</a>
					<ul>
						<li><a href="#">布局技巧</a></li>
						<li><a href="#">网页字体</a></li>
						<li><a href="#">flash</a></li>
					</ul>
				</li>
				<li>
					<a href="#">杂七杂八</a>
					<ul>
						<li><a href="#">帝国cms</a></li>
						<li><a href="#">电脑技巧</a></li>
						<li><a href="#">随笔杂谈</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Javascript</a>
					<ul>
						<li><a href="#">Jquery</a></li>
						<li><a href="#">Js学习</a></li>
						<li><a href="#">Js教程</a></li>
					</ul>
				</li>
				<li>
					<a href="#">网站优化</a>
					<ul>
						<li><a href="#">SEO杂谈</a></li>
						<li><a href="#">站长工具</a></li>
						<li><a href="#">经验分享</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>

<script  type="text/javascript"> 
$(document).ready(function(){
	
	$(".navbg").capacityFixed();
	
	$("#navul > li").not(".navhome").hover(function(){
		$(this).addClass("navmoon");
	},function(){
		$(this).removeClass("navmoon");
	});
	
});
</script>

<div style="text-align:center;">

</div>
</body>
</html>

main.css

var foo = 'bar';
```

```javascript
// An highlighted block
var foo = 'bar';
body, div, ul, li{margin:0;padding:0;}
body{font-family:"微软雅黑", Arial, Helvetica, sans-serif;color:#333333;line-height:25px;font-size:14px;}
a:link, a:visited{text-decoration:none;color:#333333;}
a:hover{text-decoration:underline;color:#08A5E0;text-decoration:none;}
ul, ul li{list-style-type:none;}
.cl{zoom:1;}
/*网站头部*/
.col960{width:960px;margin:auto;}
.navbg{height:40px;width:100%;background:#08A5E0;box-shadow:1px 1px 7px #999;position:absolute;z-index:99;left:0;}
#navul li{float:left;margin-right:1px;width:100px;height:40px;position:relative;text-align:center;line-height:40px;}
#navul li.navhome{text-align:left;padding:0 0px 0 40px;width:60px;}
#navul li a:link, #navul li a:visited{color:#FFFFFF;}
#navul li ul{display:none;position:absolute;z-index:10000;top:38px;left:-1px;background:#006D96;border:#004E6C 1px solid;border-bottom:none;}
#navul li ul li{display:block;width:98px;float:none;margin-right:0px;height:28px;position:relative;line-height:28px;border-bottom:#004E6C 1px solid;font-size:12px;}
#navul li.navmoon{background:#006D96;border:#004E6C 1px solid;width:98px;height:38px;line-height:38px;}
#navul li.navmoon a{color:#FFFFFF;}
#navul li.navhome a:hover{color:#FCFF00;}
#navul li.navmoon ul{display:block;}
#navul li.navmoon ul a{display:block;width:98px;height:28px;line-height:28px;}
#navul li.navmoon ul a:hover{background:#000000;}
```
最后，要下载以下两个插件：
1，jquery.min.js
2，script.js
Showing_abc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery滚动顶部固定导航菜单特效代码
03-20
jQuery滚动顶部固定导航菜单是一款基于jquery.1.7.1.min.js插件制作的二级网站导航菜单。鼠标向下滚动，网站菜单始终固定在网页顶部。蓝色风格，很实用。
JQuery-固定导航
weixin_50446072的博客
11-12 488
固定导航 <style> * { margin: 0; padding: 0 } img { vertical-align: top; width: 100%; } .main { margin: 10px auto 0; width: 1000px; }
jQuery小案例之固定导航栏
qq_43537987的博客
04-04 784
先来看一下效果： 代码部分： html 为展示效果方便，用三张图片代替，愿谅解。 <div class="top"> <img src="images/top.png" /> </div> <div class="nav"> <img src="images/nav.png" /> </div> <di...
display：table，布局自动分宽度
li3196672779的博客
06-25 2496
Document * { list-style: none; } ul { width: 300px; display: table; } ul li { display: ta
jquery页面滚动，菜单固定到顶部
weixin_33946605的博客
09-26 219
// 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(window).scroll(function(){ //获取滚动条的滑动距离 var scroH =...
jQuery滚动顶部固定导航菜单.zip
07-04
jQuery滚动顶部固定导航菜单是一款基于jquery.1.7.1.min.js插件制作的二级网站导航菜单。鼠标向下滚动，网站菜单始终固定在网页顶部。蓝色风格，很实用。
jQuery网页顶部固定导航菜单代码
06-24
jQuery网页顶部固定导航菜单代码是一款jQuery基于Bootstrap顶部浮动导航菜单页面滚动显示隐藏。
jQuery网页顶部固定导航菜单特效代码
03-20
jQuery网页顶部固定导航菜单代码是一款jQuery基于Bootstrap顶部浮动导航菜单页面滚动显示隐藏。
JQuery固定导航栏
qq_41276498的博客
06-26 817
代码 效果图 思路 1.顶部滚动条下到一定高度时（看不到导航栏） 2.固定导航栏，内容加间隔（margin），看起来更顺畅。 3.划上去时恢复原有状态。
jQuery实现固定顶部 定位滚动导航效果代码
07-08
适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗的二手车旗舰店网页，jQuery是一个快速、小且功能丰富的JavaScript库。
jQuery固定页面顶部导航菜单.zip
05-23
jQuery固定页面顶部导航菜单基于jquery.1.7.2.min.js制作，置顶导航菜单，随滚动条浮动定位菜单，固定菜单到页面顶部。
jQuery顶部固定导航菜单代码
09-30
jQuery顶部固定导航菜单代码
JQuery使导航栏固定于网页顶部
12-15
插件描述：下拉网页时可使导航栏固定在网页顶端. 参考示例：http://www.jq22.com/jquery-info5130
jQuery网页左侧固定导航栏
05-01
jQuery网页左侧固定导航栏基于jquery-1.7.1.min.js制作，点击导航栏菜单滑动到对应的页面，带返回顶部按钮。
jQuery实现在鼠标滚动后导航栏保持固定
jqdfTiTan的博客
09-07 8793
效果：鼠标向下滚动后，导航栏在屏幕上置顶固定。 HTML： 首页 关于我们 服务领域 业务案例 合作伙伴 官方活动 新闻资讯 联系我们 JQuery： $(document)
运用jquery实现简单的顶部导航栏固定
weixin_45582846的博客
08-31 1123
运用jquery实现简单的顶部导航栏固定 以下是html代码： <!DOCTYPE html> <html> <head> <title>回到顶部</title> <link rel="stylesheet" type="text/css" href="style/index.css" /> <script...
jquery顶部固定二级导航菜单
快乐de馒头
11-05 5651
body{ font-family: "宋体"; font-size: 14px; color: #666666; background:#f2f2f2 url(images/bg.gif) repeat-x left top; height: 2000px; } ul,li,html,body{margin: 0px; padding: 0px;} ul{list-style-typ
jQuery固定导航栏
qq_39369835的博客
02-18 354
jQuery固定导航栏： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { margin: 0; p
jQuery实现点击左侧固定导航栏，页面滑动展示相应页面内容相对应
ITisgrowing的博客
12-02 7281
点击左侧导航栏，定位对应的页面，显示相应的内容；滑动到对应的内容，自动匹配相应的导航栏 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;内容滑动与导航时时对应&lt;/title&gt; &lt;
jquery滚动条滚动到顶部
最新发布
08-09
要将jQuery滚动条滚动到页面顶部，可以使用以下代码： ```javascript $('html, body').animate({scrollTop: 0}, 'slow'); ``` 这行代码选择器 `$('html, body')` 选择了整个文档，无论是在 `html` 元素上滚动还是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值