30行实现动态定位导航菜单栏

30行实现动态定位导航

会用的到技术点
HTML代码
JavaScript代码
效果图

– 文件文章末尾下载 –
**

会用的到技术点

scroll（）：在滚动条发生滚动的时候触发
scrollTop（）：获取滚动条的位置
find（）：查询节点下的所有的某个后代
each（）：遍历每个元素
offset（）：返回某个节点的偏移量
attr（）：获取或者赋值某个节点的某个属性的值

HTML代码

<html>
<head>
<meta charset="UTF-8"><title>定位导航</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: #99CC99;}li {list-style: none;}#menu{position: fixed;top: 100px;left: 50%;margin-left: 400px;width: 50px;}#menu ul li a {display: block;margin: 5px 0;font-size: 14px;font-weight: bold;color: #333;width: 100px;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;}#content {width: 800px;margin: 0 auto;padding: 20px;}#content .item{width: 500px;height: 800px;padding: 20px;line-height: 50px;text-align: center;margin-bottom: 20px;border: 1px solid #CC9999;background-color: #CC9966;}</style></head><body><div id="menu"><ul><li><a href="#item1" class="current">《出塞》</a></li><li><a href="#item2">《春晓》</a></li><li><a href="#item3">《杂诗》</a></li><li><a href="#item4">《早发白帝城》</a></li></ul></div><div id="content"><div id="item1" class="item"><h2>《出塞》</h2><p>秦时明月汉时关，</p><p>万里长征人未还。</p><p>但使龙城飞将在，</p><p>不教胡马度阴山。</p></div><div id="item2" class="item"><h2>《春晓》</h2><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p></div><div id="item3" class="item"><h2>《杂诗》</h2><p>君自故乡来，</p><p>应知故乡事。</p><p>来日绮窗前，</p><p>寒梅著花未？</p></div><div id="item4" class="item"><h2>《早发白帝城》</h2><p>朝辞白帝彩云间，</p><p>千里江陵一日还。</p><p>两岸猿声啼不住，</p><p>轻舟已过万重山。</p></div></div>
</body></html>

JavaScript代码

<script type="text/javascript">$(document).ready(function() {$(window).scroll(function(){var top = $(document).scrollTop();//获取滚动条的位置var menu = $('#menu');var items = $('#content').find('.item');var contentId = "";items.each(function(){var m = $(this);var itemTop = m.offset().top;//offset()获取节点的偏移if(top > itemTop-100){contentId = "#"+m.attr("id");}else{return;}console.log(itemTop);});var contentLink = menu.find(".current");if(contentId&&contentLink.attr('href') !=contentId){contentLink.removeClass('current');menu.find('[href='+contentId+']').addClass("current");}});});</script>

[1] 滚动条的的位置大于每个item的距离顶部的位置的时候，则代表着已经过了该item，
[2] 减去100px的原因：因为如果不减，top的位置会拤着临界点，会使实际上恰好看到某个item时，必须超过这个item一点点的时候才能自动变换菜单，这个时候减去一定值，就会使用户体验更好。

动态定位导航下载

效果图

30行实现动态定位导航菜单栏相关推荐

通栏导航栏的制作，综合使用CSS属性，代码不超过30行
这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度. 承接文章:灵活控制块级元素 ...
【最全最详细】使用publiccms实现动态可维护的导航菜单栏
" 大家好,我是雄雄,欢迎关注微信公众号:????**雄雄的小课堂????. " ????‍????前言昨天,给大家整理的是通过publiccms实现动态可维护的轮播图,有需要的 ...
url没有参数名怎么直接带参数_用30行Python爬虫带你看PLMM（划掉，喵星人）
偶尔写写爬虫也算是打磨无聊生活的一种方式了. 之前写了一个用100多行Python爬虫看世界的帖子,有兴趣的朋友可以看一下. 带你用100多行Python爬虫看看今天的世界(上) 带你用100多行Py ...
Axure 9 实战案例，动态面板的应用 6，导航菜单栏的手风琴效果
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 我们接着再继续学习动态面板的应用,本篇课程我们来讲解一下,如何运用动态面板绘制导航菜单栏的手风琴效果. 我 ...
30行代码，带你分分钟创建神经网络！(附工具教程)
来源:大数据文摘作者:Per Haiald Borgen 本文长度为1612字,建议阅读3分钟本文为你介绍如何使用Synaptic.js创建和训练神经网络. 本文含大量代码,如需原文请从文末来源链 ...
python简单代码演示效果-10分钟教你用python 30行代码搞定简单手写识别！
欲直接下载代码文件,关注我们的公众号哦!查看历史消息即可! 手写笔记还是电子笔记好呢? 毕业季刚结束,眼瞅着2018级小萌新马上就要来了,老腊肉小编为了咱学弟学妹们的学习,绞尽脑汁准备编一套大学秘籍, ...
python30行代码_仅利用30行Python代码来展示X算法
假如你对数独解法感兴趣,你可能听说过精确覆盖问题.给定全集 X 和 X 的子集的集合 Y ,存在一个 Y 的子集 Y*,使得 Y* 构成 X 的一种分割. 这儿有个Python写的例子. X = {1 ...
vb.net读取excel并写入dgv_读取PDF中的表格写入EXCEL？30行代码搞定
办公自动化系列+1 现在,各类数据分析的书籍,都可以在网上找到PDF版本: 同时,百度文库.各类数据统计文库.行业研究等众多论文报告,是通过PDF的形式去展示输出的: 但是,令人都头疼的是,各类数据分 ...
thymealf如何实现传单个变量给html_梦回2013，看尤大vue的第一行代码，如何用30行代码实现vue(超简洁，适合初学者)...
非非非标题党,干货预警!!! 介绍大家好,我是清池交友 app 开发日记,记录清池交友 app 开发中学习过程和踩坑日记,伪全栈[1] 技术栈:前端 js,vue,uniapp,后端 java 尤大 ...

30行实现动态定位导航菜单栏

30行实现动态定位导航

会用的到技术点

HTML代码

JavaScript代码

效果图

30行实现动态定位导航菜单栏相关推荐

最新文章

热门文章