小程序制作工具_Javascript完成页面滚动时导航智能定位

  • 栏目:行业动态 时间:2021-01-12 11:33 分享新闻到:
<返回列表

Javascript实现页面滚动时导航智能定位       本篇文章主要介绍了Javascript实现页面滚动时导航智能定位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域。

假设结构如下:

 div 
 div 
 div id="section1" section1 /div 
 div id="section2" section2 /div 
 div id="section3" section3 /div 
 div id="section4" section4 /div 
 div id="section5" section5 /div 
 /div 
 nav 
 a href="#section1" rel="external nofollow" section1 /a 
 a href="#section2" rel="external nofollow" section2 /a 
 a href="#section3" rel="external nofollow" section3 /a 
 a href="#section4" rel="external nofollow" section4 /a 
 a href="#section5" rel="external nofollow" section5 /a 
 /nav 
 /div 

页面滚动时导航定位

js代码如下:

var $navs = $('nav a'), // 导航
 $sections = $('.section'), // 模块
 $window = $(window),
 navLength = $navs.length - 1;
$window.on('scroll', function() {
 var scrollTop = $window.scrollTop(),
 len = navLength;
 for (; len len--) {
 var that = $sections.eq(len);
 if (scrollTop = that.offset().top) {
 $navs.removeClass('current').eq(len).addClass('current');
 break;

效果如下:

不难看出,基本原理就是在window滚动的时候,依次将模块从后向前遍历,如果window的滚动高度大于或等于当前模块的距页面顶部的距离,则将当前模块对应的导航突出显示,并且不再继续遍历

点击导航定位页面

除了这种需求外,还有另一种需求,就是点击导航定位到导航所对应模块的顶部。

代码如下:

$navs.on('click', function(e) {
 e.preventDefault();
 $('html, body').animate({
 'scrollTop': $($(this).attr('href')).offset().top
 }, 400);

效果如下:

以上基本上满足了业务的基本需求,这是工作中总结的经验,希望对大家的学习有所帮助,也希望大家多多支持凡科。

分享新闻到:

更多阅读

小程序制作工具_Javascript完成页面滚动时

行业动态 2021-01-12
Javascript完成网页页面翻转时导航栏智能化精准定位 普遍的开发设计网页页面中将会会出...
查看全文

广西企业建站公司引荐-重庆护肤品企业官

行业动态 2021-01-12
分号互连出示这一套护肤品企业网站模板,此套模版基本色应用淡黄色,设计风格选用简洁,...
查看全文

h5免费制作app-建设外贸公司网站应该注意

行业动态 2021-01-12
伴随着经济发展全世界化的发展趋势,中国做出口外贸的公司越来越越大,出口外贸公司也都...
查看全文
返回全部新闻


区域站点: 南丰县长图制作   南宫市在线编辑图片   囊谦县图片加文字怎么制作   南和县怎样抠图   南华县长图制作   南江县在线编辑图片   南京市图片加文字怎么制作   南靖县怎样抠图   南康市长图制作   南乐县在线编辑图片   南陵县图片加文字怎么制作   南宁市怎样抠图   南平市长图制作   南皮县在线编辑图片   南市区图片加文字怎么制作   南通市怎样抠图   南投县长图制作   南雄市在线编辑图片   南溪县图片加文字怎么制作   南阳市怎样抠图   南漳县长图制作   南召县在线编辑图片   南郑县图片加文字怎么制作   那坡县怎样抠图   那曲县长图制作   纳雍县在线编辑图片   讷河市图片加文字怎么制作   内黄县怎样抠图   内江市长图制作   内丘县在线编辑图片   内乡县图片加文字怎么制作   嫩江市怎样抠图   聂荣县长图制作   尼玛县在线编辑图片   尼木县图片加文字怎么制作   宁安市怎样抠图   宁波市长图制作   宁城县在线编辑图片   宁德市图片加文字怎么制作   宁都县怎样抠图   宁国市长图制作   宁海县在线编辑图片   宁化县图片加文字怎么制作   宁晋县怎样抠图   宁陵县长图制作   宁明县在线编辑图片   宁南县图片加文字怎么制作   宁强县怎样抠图   宁陕县长图制作   宁武县在线编辑图片   宁乡市图片加文字怎么制作   宁阳县怎样抠图   宁远县长图制作   农安县在线编辑图片   磐安县图片加文字怎么制作   盘锦市怎样抠图   盘山县长图制作   磐石市在线编辑图片   盘州市图片加文字怎么制作   蓬安县怎样抠图   澎湖县长图制作   蓬莱市在线编辑图片   彭山县图片加文字怎么制作   蓬溪县怎样抠图   彭阳县长图制作   彭泽县在线编辑图片   彭州市图片加文字怎么制作   偏关县怎样抠图   平安县长图制作   平昌县在线编辑图片   平定县图片加文字怎么制作   屏东县怎样抠图   平度市长图制作   平果县在线编辑图片   平和县图片加文字怎么制作   平湖市怎样抠图   平江县长图制作   平乐县在线编辑图片   平凉市图片加文字怎么制作   平利县怎样抠图   平罗县长图制作   平陆县在线编辑图片   屏南县图片加文字怎么制作   平泉市怎样抠图   屏山县长图制作   平顺县在线编辑图片   平塘县图片加文字怎么制作   平潭县怎样抠图   平武县长图制作   萍乡市在线编辑图片   平乡县图片加文字怎么制作   平阳县怎样抠图   平遥县长图制作   平阴县在线编辑图片   平邑县图片加文字怎么制作   平远县怎样抠图   平舆县长图制作   皮山县在线编辑图片   普安县图片加文字怎么制作   浦北县怎样抠图   浦城县长图制作   普洱市在线编辑图片   普格县图片加文字怎么制作   浦江县怎样抠图   普兰县长图制作   普宁市在线编辑图片   莆田市图片加文字怎么制作   迁安市怎样抠图   乾安县长图制作   潜江市在线编辑图片   潜山市图片加文字怎么制作  

友情链接: 贴图软件 在线免费抠图 制作图片加文字的 在线一键抠图 手机版

Copyright © 2002-2020 图片加文字怎么制作_怎样抠图_长图制作_在线编辑图片_如何制作水印图片logo 版权所有 (网站地图) 备案号:粤ICP备10235580号