js实现导航菜单栏随着屏幕的滚动进行滚动的效果

 1   $(window).scroll(function () {
 2             var $nav = $(".floatingMenu ul li"),
 3                 length = $nav.length-1,//获取导航菜单 ul li 的个数
 4                 item = new Array(),//新建一个数组
 5                 sTop = $(window).scrollTop();//获取偏移的高度
 6             for (var i = 0; i < length; i++) {
 7                 if (i == 0) {
 8                     item[i + 1] = $(".blockList>div:first-child").offset().top;
 9                     if (sTop >= item[i + 1]) {
10                         $nav.eq(i).addClass("selected").siblings("li").removeClass("selected");//选中的样式selected
11                     }
12                 } else {
13                     item[i + 1] = $(".blockList>div:nth-child(" + (i + 1) + ")").offset().top;
14                     if (sTop >= item[i + 1] - 100) {
15                         $nav.eq(i).addClass("selected").siblings("li").removeClass("selected");
16                     }
17                 }
18             }
19         })
时间: 2024-11-06 20:24:49

js实现导航菜单栏随着屏幕的滚动进行滚动的效果的相关文章

js实现导航固定定位

                                                                               js实现导航固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="

(转)JS浮动窗口(随浏览器滚动而滚动)

原文:http://hi.baidu.com/aiyayaztt/item/4201c55a6b729dced2e10c79 JS浮动窗口(随浏览器滚动而滚动) 往往用于一些联系方式,互动平台模块,随着浏览器的滚动而滚动. <div id="AdLayer"> <p>窗口中的内容</p> </div> 放在<body>下面(页面最上面) JS代码 window.onload=function(){ var n=0;//top值

基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面效果. 2.插件源代码: /* * 作者:孟繁贵 * 2017-08-25 * 版本:1.0 */ jQuery.anchorScroll = function(elem1, elem2) { var currObj, offsetTop = 0, h2List = new Array(), h3L

JS实现导航条效果——current跟随鼠标hover移动

<!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-

JS实用的带停顿的逐行文本循环滚动效果

<!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> <title>JS实用的带停顿的逐行文本循环滚动效果丨k

BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls

设置DIV随滚动条滚动而滚动

有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml&quo

开发路程(14):背景图片移动插件MyFloatingBg(浮动背景图效果,可让背景随着页面的滚动而滚动)

MyFloatingBg这插件可以帮助你在网页上加入可移动背景Background.你可以用于整个文件的背景,或是某几个banner的背景. 它可支持简单的animation效果,你不用去做一个flash文件或动态gif图片.单靠jquery和图片,你便可以做出不同的效果.由于我们把动画效果跟内容分开,我们也可以随时更改文字等内容,而不影响其运作.这个效果很是大气,我想可以使用在高级餐厅,珠宝展会等中做展示用. 1 <!doctype html> 2 <html lang="e

JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理,这篇博主将带领大家一起来优化这里的效果,使之成为一个可以在项目里面使用的成品. 说点题外话,本来,在互联网模式下,Tab页+iframe的组合是不能被大多数平台接受的,从这些年推出的一些好的产品可以看出,几乎大家都不这么玩,即使是一些后台的管理模板,比如常见的AdminLTE.Ace.INSPIN