<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>网页导航特效</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:"微软雅黑","宋体";}
a{color:#666; text-decoration:none;}
ul,li{list-style:none;}
#content{width:990px; margin:0 auto;}
#content h1{height:40px; font-size:20px; line-height:40px; padding-left:20px;}
.item{width:970px; height:600px; margin:10px auto 0; border:1px solid #FFCC99;}
.item h2{height:34px; line-height:34px; font-size:16px; padding-left:26px;}
.item ul{width:100%;}
.item li{width:300px; height:250px; float:left; border:1px solid #9999FF; margin:10px 0 0 10px; line-height:250px; text-align:center;}
#menu{position:fixed; left:50%; margin-left:495px; top:250px;}
#menu ul{border:1px solid #FF9966;}
#menu li a{display:block; width:60px; height:30px; border-bottom:1px solid #FF9966; line-height:30px; text-align:center;}
#menu li a.hover,#menu li a:hover{ background:#0066FF; color:#fff;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#item1" class="hover">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="#">男装</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>
</div>
<div id="item2" class="item">
<h2>2F 女装</h2>
<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>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妆</h2>
<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>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 母婴</h2>
<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>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 数码</h2>
<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>
</ul>
</div>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var menu = $("#menu");//保存menu节点
var items = $("#content").find(".item");//保存item数组
var cId = "";//保存item id
var top = $(document).scrollTop();//得到滚动条距离文档顶端的距离
items.each(function(){
var cItem = $(this);//得到每一个当前item
var cTop = cItem.offset().top;//得到每一个当前item距离文档顶部的高度
if(top>cTop-200){
cId = "#"+cItem.attr("id");//得到当前楼层的id,然后再把这个id值同的导航项添加class .hover
}else{
return false;
}
});
var cAnchor = menu.find(".hover");//获得导航条中class=hover的标签
if(cId && cAnchor.attr("href") != cId ){//如果当前id不为空也不等于导航条中的.hover的a的href值相同，改变
cAnchor.removeClass("hover");
menu.find("[href="+cId+"]").addClass("hover");
}
});
});
</script>
</body>
</html>
分享到：
相关推荐
网页导航布局是网页设计的关键部分，它引导用户在网站的不同页面间跳转，提供清晰的路径，提高用户对网站的可访问性和互动性。一个优秀的导航布局应具备以下特点： 1. **清晰直观**：导航栏应该简洁明了，使用户一...
本资源提供了一个基于“div+css”的蓝色网站导航源码，适用于想要创建美观且功能强大的网页导航的开发者。这个导航条源码是www.020fphs.com网址更新的一部分，体现了优秀的网页设计实践，特别适合学习和应用CSS+Div...
网站导航源码是一种用于构建个性化网页导航栏的代码资源，对于网页设计师和开发者来说非常有用。这个特定的源码称为“好看有个性的网站导航源码”，表明它旨在提供美观且具有独特风格的导航功能。从描述来看，该源码...
本资源提供的是一款基于CSS3的红色风格网站导航三级下拉菜单代码，适用于构建具有视觉吸引力且功能完善的网页导航系统。 首先，我们要理解CSS3（Cascading Style Sheets Level 3）是CSS规范的最新版本，它引入了...
WordPress网址导航源码全局自适应手机端网站导航简约风主题模板，基于WordPress博客系统的网址导航网站源码，有单独的主题和整站源码打包文件，大家看情况自行选择。 WordPress网址导航源码全局自适应手机端网站导航...
网站导航是互联网用户在浏览网页时的重要工具，它可以帮助用户快速找到所需的信息和服务。这篇分享主要探讨几个设计美观且功能实用的网站导航，让你的网络冲浪体验更加愉快。 一、网站导航的作用与重要性 1. 用户...
【纯CSS垂直三级网站导航菜单】是一个用于网页设计的组件，它主要关注的是用户体验和页面的可导航性。这个菜单完全基于CSS3技术构建，不依赖JavaScript或其他编程语言，因此加载速度快，对浏览器的兼容性良好。以下...
在"maya.rar_asp导航_maya_玛雅_玛雅网站导航_玛雅视频导航"这个压缩包中，我们关注的核心是ASP技术在构建玛雅自助导航系统中的应用。 玛雅自助导航系统，正如其名，是一个以ASP技术为基础，为用户提供方便快捷的...
网页导航在设计和开发网站时扮演着至关重要的角色，它为用户提供了一种直观的方式来浏览网站的不同部分。"精美网页导航网页特效代码"是专门针对这一关键元素的资源，旨在帮助开发者创造出吸引眼球、功能强大的导航...
网页导航栏是网站设计中的重要组成部分，它为用户提供了一个直观的界面来浏览网站的不同部分。在本主题中，我们将深入探讨“十几种网页导航栏”的设计、实现方式以及相关的HTML、CSS和JavaScript技术。 首先，让...
在“金属分类购物信息JS网页导航条代码”中，我们将探讨如何使用JavaScript（JS）语言来创建一个功能丰富的、适用于金属商品分类的购物网站导航条。 首先，JS导航条的核心在于动态交互性。JavaScript是一种客户端...
【简洁无广告网站导航】是一种精心设计的网络服务，旨在为用户提供清爽、高效的上网体验，避免传统导航网站中常见的广告干扰。这样的导航站点通常具备以下关键特点： 1. **用户体验优化**：简洁无广告的网站导航...
【描述】中提到的“帝国cms网站导航模板”，是指基于帝国CMS系统设计的一套专门用于展示网址导航的界面布局和样式。模板通常包含了HTML、CSS、JavaScript等元素，能够快速应用到网站上，提供一种统一的视觉效果和...
而`色站导航.reg`文件可能是一个注册表文件，用于导入一些颜色相关的网站或资源，方便用户查找和参考颜色搭配。 总的来说，这款CSS网页导航栏样式制作软件对于初学者或者不熟悉CSS的人来说，是一个非常实用的工具，...
本资源提供了一套基于HTML的简单网站导航的设计源码，包含22个文件，其中包括10个PNG图片文件，3个JavaScript脚本文件，以及1个CNAME文件。此外，还包括1个Git忽略文件，1个LICENSE许可证文件，1个Markdown文档，...
网页导航条是网站设计中的重要元素，它帮助用户在页面之间快速切换，提供良好的用户体验。本资源提供了动感的网页导航条的源代码，适合开发者参考和使用，以提升网站的互动性和吸引力。以下是对相关知识点的详细说明...
在C#编程中，网页导航通常指的是在ASP.NET框架下创建动态网页并实现页面间的跳转。本示例将深入探讨如何使用C#语言来构建一个基础的网页导航系统。 首先，我们需要理解ASP.NET的基本结构。ASP.NET是Microsoft提供的...
网站导航在网页设计中起着至关重要的作用，它引导用户高效地浏览网站内容。本项目提供的是一套基于HTML5和CSS3技术构建的精美导航源码，具备动态背景和响应式设计，能自适应不同分辨率的设备。接下来，我们将详细...
本资源包包含了多种基于jQuery、JavaScript和CSS技术实现的网页导航菜单，旨在为开发者提供丰富的选择和灵感，以创建高效且吸引人的网站导航。 1. **jQuery**：jQuery 是一个快速、简洁的JavaScript库，简化了HTML...
2023最新精美PHP导航网源码 导航收录网站，精美PHP导航网源码 导航收录网站，技术导航，QQ技术导航，网站导航，站长导航网源码，网站目录源码 前端基于D.Young的 5IUX搜索 ，后台使用笔下光年的Light Year Admin模板...