网页定位导航

最新推荐文章于 2021-04-15 11:40:14 发布
原创 最新推荐文章于 2021-04-15 11:40:14 发布 · 240 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #网页定位导航

这篇博客介绍了如何利用jQuery和JavaScript两种方法实现网页定位导航。作者作为新手，在学习过程中遇到挑战，通过实践加深了对jQuery和原生JS的理解，尤其是滚动定位的技术要点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天学习了运用jQuery、JavaScript两种方式实现网页定位导航。

第一种

运用jquery

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>网页定位</title>
	<style>
		*{
			margin:0;
			padding: 0;
		}
		body{
			font-size: 12px;
			line-height: 1.7;
		}
		li{
			list-style: none;
		}
		#content{
			width: 800px;
			margin :0 auto;
			padding: 20px;
		}
		#content h1{
			color: #0088bb;
		}
		#content .item{
			padding:20px;
			margin-bottom: 20px;
			border: 1px dotted #0088bb; 
		}
		#content .item h2{
			font-size: 16px;
			font-weight: bold;
			border-bottom: 2px solid #0088bb;
			margin-bottom: 10px;
		}
		#content .item li{
			display: inline;
			margin-right: 10px;
		}
		#content .item li a img{
			width: 230px;
			height: 230px;
			border:none;
		}
		#menu{
			position: fixed;
			top:100px;
			left: 50%;
			margin-left: 400px;
			width: 80px;
		}

		#menu ul li a{
			display: block;
			margin:5px 0;
			font-size: 14px;
			font-weight: bold;
			color: #333;
			width: 80px;
			height: 50px;
			line-height: 50px;
			text-decoration: none;
			text-align: center;
		}

		#menu ul li a:hover,
		#menu ul li a.current{
			color: #fff;
			background: #0088bb;
		}
	</style>
	<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script>

		$(document).ready(function(){
			//滚动条发生滚动
			$(window).scroll(function(){

                  var top = $(document).scrollTop();
                  var menu = $("#menu");
                  var items = $("#content").find(".item");

                  var currentId = "";//当前所在的楼层id
                  items.each(function(){
                  	var m = $(this);
                  	var itemTop = m.offset().top;
                    if (top > itemTop -200) {
                         currentId = "#" + m.attr("id");
                    }else {
                    	return false;
                    }
                  });
                  
                  //给相应的楼层的a设置current，取消其他链接的current
                  var currentLink = menu.find(".current");
                  if (currentId && currentLink.attr("href")!=currentId) {
                  	 currentLink.removeClass("current");
                  	 menu.find("[href=" + currentId + "]").addClass("current");
                  }
                  //console.log(top)
			});
		});

	</script>
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="#item1" class="current">1F 小猫</a></li>
		<li><a href="#item2">2F 小狗</a></li>
		<li><a href="#item3">3F 老虎</a></li>
		<li><a href="#item4">4F 狮子</a></li>
		<li><a href="#item5">5F 大象</a></li>
	</ul>
</div>
<div id="content">
	<h1>动物网</h1>

	<div id="item1" class="item">
	<h2>1F 小猫</h2>
	<ul>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
	</ul>
</div>
<div id="item2" class="item">
	<h2>2F 小狗</h2>
	<ul>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
	</ul>
</div>
<div id="item3" class="item">
	<h2>3F 老虎</h2>
	<ul>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
	</ul>
</div>
<div id="item4" class="item">
	<h2>4F 狮子</h2>
	<ul>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
	</ul>
</div>
<div id="item5" class="item">
	<h2>5F 大象</h2>
	<ul>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
	</ul>
</div>
</div>
</body>
</html>

 

实现效果如图

 

 

第二种

运用原生JS实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>网页定位</title>
	<style>
		*{
			margin:0;
			padding: 0;
		}
		body{
			font-size: 12px;
			line-height: 1.7;
		}
		li{
			list-style: none;
		}
		#content{
			width: 800px;
			margin :0 auto;
			padding: 20px;
		}
		#content h1{
			color: #0088bb;
		}
		#content .item{
			padding:20px;
			margin-bottom: 20px;
			border: 1px dotted #0088bb; 
		}
		#content .item h2{
			font-size: 16px;
			font-weight: bold;
			border-bottom: 2px solid #0088bb;
			margin-bottom: 10px;
		}
		#content .item li{
			display: inline;
			margin-right: 10px;
		}
		#content .item li a img{
			width: 230px;
			height: 230px;
			border:none;
		}
		#menu{
			position: fixed;
			top:100px;
			left: 50%;
			margin-left: 400px;
			width: 80px;
		}

		#menu ul li a{
			display: block;
			margin:5px 0;
			font-size: 14px;
			font-weight: bold;
			color: #333;
			width: 80px;
			height: 50px;
			line-height: 50px;
			text-decoration: none;
			text-align: center;
		}

		#menu ul li a:hover,
		#menu ul li a.current{
			color: #fff;
			background: #0088bb;
		}
	</style>
	<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script>
     //运用js原生代码

      //根据class name 获取元素
		function getByClassName(obj, cls){
			var elements = obj.getElementsByTagName("*");
			var result = [];
			for ( var i = 0;i< elements.length; i++) {
				if (elements[i].className == cls) {
					result.push(elements[i]);
				   }
			    }
			return result;
		}
			function hasClass( obj, cls){
				return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
			}

			function removeClass( obj , cls){
				if( hasClass( obj, cls )){
					//remove
					var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
					obj.className = obj.className.replace(reg, "");
				}

			}

			function addClass( obj , cls ){
				if( !hasClass( obj , cls)){
					obj.className += " " +cls;
				}
			}




        window.onload = function(){
            window.onscroll = function(){

			var top = document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;

			var menus = document.getElementById("menu").getElementsByTagName("a");

			var items = getByClassName(document.getElementById("content"),"item");

			var currentId = "";

			for( var i=0; i< items.length; i++){
				var _item = items[i];
				var _itemTop = _item.offsetTop;
				if (top >_itemTop -200) {
					currentId = _item.id;
				}else{
					break;
				}
			}
			if (currentId) {
				//给正确的menu下的a元素class赋值
				for (var j = 0; j <menus.length; j++) {
					var _menu = menus[j];
					var _href = _menu.href.split("#");

					if( _href[_href.length - 1] != currentId ){
						removeClass(_menu, "current");
					} else{
						addClass(_menu, "current");
					}  
				}
			}
		}
}
	</script>
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="#item1" class="current">1F 小猫</a></li>
		<li><a href="#item2">2F 小狗</a></li>
		<li><a href="#item3">3F 老虎</a></li>
		<li><a href="#item4">4F 狮子</a></li>
		<li><a href="#item5">5F 大象</a></li>
	</ul>
</div>
<div id="content">
	<h1>动物网</h1>

	<div id="item1" class="item">
	<h2>1F 小猫</h2>
	<ul>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
		<li><a href="#"><img src="1.jpg" alt=""/></a></li>
	</ul>
</div>
<div id="item2" class="item">
	<h2>2F 小狗</h2>
	<ul>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
		<li><a href="#"><img src="2.jpg" alt=""/></a></li>
	</ul>
</div>
<div id="item3" class="item">
	<h2>3F 老虎</h2>
	<ul>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
		<li><a href="#"><img src="3.jpg" alt=""/></a></li>
	</ul>
</div>
<div id="item4" class="item">
	<h2>4F 狮子</h2>
	<ul>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
		<li><a href="#"><img src="4.jpg" alt=""/></a></li>
	</ul>
</div>
<div id="item5" class="item">
	<h2>5F 大象</h2>
	<ul>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
		<li><a href="#"><img src="5.jpg" alt=""/></a></li>
	</ul>
</div>
</div>
</body>
</html>

 

 

实现效果如图：

 

 

 

这次学习的过程中遇到了很多的困难，因为是一个新手，对这些都不是特别的了解，之前有学习过Jquery，可是学的不是特别好，这次是一次很好的巩固。这次还运用了原生的JS来编写，获益匪浅。

下面是滚动的技术要点

 

jQuery网页定位导航特效实现方法
10-20
在介绍jQuery网页定位导航特效实现方法时，我们需要关注几个核心的概念和步骤。首先，网页定位导航特效是一种使网页浏览更加直观和方便的技术，它可以实现在页面中快速定位到特定内容区域的功能。jQuery作为一款流行...
jquery实现网页定位导航
10-21
本文将详细介绍使用jQuery来实现这种网页定位导航的方法，这对于处理长页面尤其有帮助。 ### 实现步骤 1. **页面布局的准备**： - 在页面顶部设置导航菜单，每个导航项都应包含一个带有特定锚点`href`属性的`<a>`...
js实现网页定位导航功能
10-20
【网页定位导航功能详解】 网页定位导航是一种常见于现代网页设计中的交互技术，它能够根据用户在页面上的滚动位置自动高亮或突出显示相应的导航菜单项。这种功能为用户提供了一种直观的方式，帮助他们理解当前浏览...
网页定位导航效果---详解
weixin_30920513的博客
08-18 150
废话不多说，先上图，查看效果！ 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>网页定位导...
页面导航定位
谦进
06-18 670
用HTML的锚点来定位有一定的局限性，可能不是精确地定位到一个高度，而且似乎对于动态的节点的支持也不够。那么用JS去动态滚动页面就很好地解决这些问题，能精确地定位到一个高度，而且用的是事件。
网页导航条定位
weixin_34306446的博客
06-23 843
*{ margin: 0; padding: 0; } .menu{ width: 200px; height: 400px; position: absolute; ...
网页导航定位的实现
weixin_34392906的博客
01-15 176
为什么80%的码农都做不了架构师？>>> ...
网页定位导航特效
任性的wo的博客
09-07 637
网页定位导航设计1.解决问题流程：分析—设计——实现 2.特效分析分为左右两部分： 1）.左侧的内容，右侧悬浮的导航菜单 2）.左侧滚动，右侧不改变位置 3）.点击右侧，左侧定位相应栏目 4).左侧滚到相应栏目，右侧定位到对应链接 3.重难点 1）.左侧栏目和右侧导航菜单的显示样式实现 2）.导航与滚动条之间的定位关联 css scrollTop 4.导航与滚动条之间的定位关联 滚动条与右侧导航条
网页位置定位-适合导航定位
wxjyu的博客
04-15 467
问题：如何让滚动区域里面的特定位置滚动到顶部位置。 方法1：使用 scrollTop = ‘数据’ 弊端：里面设置的数据是固定值，在不同手机里面滚动的范围无法判断。有的手机设置的数据可以符合，有的手机就不行 方法2：直接对滚动区域实行锚点的定位。 弊端：个别手机会存在位置差异。h5页面会存在玄学差异，这个不推荐。 解决方案：使用scrollIntoView()进行可视化的（代码示例如下）...
jquery实现网页定位导航特效
CaseyWei
08-14 274
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;  &lt;script src="http://code.jquery.com/jquery-1.11.3.js"&gt;&lt;/script&gt;      &lt;meta charset="UTF-8"&gt;     &amp
网页定位导航设计的知识点
陈开心的博客
09-08 727
锚点（anchor）：锚点是页面内的超级链接 滚动条定位的事件和方法： scroll：当用户滚动指定的元素时会发生scroll事件，scroll事件适用于所有可滚动的元素和window对象（浏览器窗口）。 例如：当页面滚动条发生变化时执行函数 $(window).scroll(function(){ //滚动时执行的代码 }); scrollTop：获取/...
[实例]网页定位导航
Jinming Su
12-29 631
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>地狗购物网-网页定位导航效果</title> <style> * { margin: 0; padding: 0; } body { fon
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值