<!DOCTYPE html><html lang=\"大众en\公众><head> <meta charset=\公众UTF-8\"大众> <title>内容滑动与导航时时对应</title></head><link rel=\公众stylesheet\公众 href=\"大众../../script/bootstrap/dist/css/bootstrap.min.css\"大众><script type=\"大众text/javascript\"大众 src=\"大众../../jquery-1.10.2.js\公众></script><script type=\公众text/javascript\"大众 src=\"大众mundo-test.js\"大众></script><style type=\"大众text/css\公众> .sidenav{ font-weight: bold !important; color: red !important; background: #0f0f0f !important; display: inline-block; height: 40px; width: 100px; margin-top: 20px; font-size: 20px; text-align: center; padding-top: 6px; } .sidenav-first{ font-weight: normal; color: #74aaf9; background: #e8f2ff; display: inline-block; height: 40px; width: 100px; margin-top: 20px; font-size: 20px; text-align: center; padding-top: 6px; } .test{ background: antiquewhite; font-size: 18px; color: blueviolet; padding: 23px 50px; margin-top: 20px; } p{ line-height: 40px; }</style><body><div class=\公众col-sm-2\"大众> <div id=\公众menu\"大众 style=\"大众position: fixed;\公众> <ul> <li><a href=\"大众#test1\公众 class=\"大众sidenav-first sidenav test1\"大众>首页</a></li> <li><a href=\"大众#test2\"大众 class=\"大众sidenav-first test2\"大众>第一页</a></li> <li><a href=\"大众#test3\"大众 class=\"大众sidenav-first test3\"大众>第二页</a></li> <li><a href=\"大众#test4\公众 class=\"大众sidenav-first test4\"大众>第三页</a></li> <li><a href=\"大众#test5\公众 id=\"大众test-last\"大众 class=\公众sidenav-first test5\"大众>第四页</a></li> </ul> </div></div><div class=\"大众col-sm-10\"大众> <div id=\公众content\"大众> <div class=\"大众test\公众 id=\"大众test1\公众> <h1>首页</h1> <p> 作曲 : 家家 作词 : 家家 编曲：家家 还有什么等待还有什么悲哀 这故事中的人不太精彩 夏去了又回来而人却已不在 它重复着我彭湃的忍耐 今年兰花又开开了它也会败 我想 把心逐步的释怀 我知道从一开始随随便便深深浅浅 不过是爱的自由不计前嫌不知疲倦 永久太远走远迢遥 不过是爱的自由不计前嫌不知疲倦 永久太远走远迢遥 放开不再拖欠 </p> </div> <div class=\"大众test\"大众 id=\"大众test2\"大众> <h1>第一页</h1> <p> 作曲 : 李双飞 作词 : 施人诚 我好久没来这间餐厅 没想到已经换了装潢 角落那窗口闻的到玫瑰花喷鼻香 被你一说是有些印象 我没有说谎我何必说谎 你知道的我缺陷之一便是很健忘 我哪有说谎 是很感谢今晚的相伴 但我竟然有些不习气 我知道从一开始随随便便深深浅浅 不过是爱的自由不计前嫌不知疲倦 永久太远走远迢遥 放开不再拖欠oh 陪伴三个时令还是承受破碎 曾经是心心念念 随随便便深深浅浅 爱上了不语不言不计前嫌不知疲倦 向后向前遇见改变 那残破疲倦 永久太远走远迢遥 放开不再拖欠 </p> </div> <div class=\公众test\"大众 id=\公众test3\公众> <h1>第二页</h1> <p> 作曲 : 花粥 作词 : 姬霄 编曲/混音：马雨阳 劫过九重城 夙愿只隔一箭 薄暮下模糊的侧脸 遗忘了伤痛的少年 </p> </div> <div class=\"大众test\公众 id=\"大众test4\"大众> <h1>第三页</h1> <p> 作曲 : 简弘亦 作词 : 海雷 编曲：丁培峰 不愿染是与非 怎料事与愿违 心中的花枯萎 光阴它去不回 但愿洗去浮华 掸去一身尘灰 再与你一壶清酒 话一世沉醉 不愿染是与非 怎料事与愿违 心中的花枯萎 光阴它去不回 一场回顾 生生灭灭 明晰心扉 再回顾浅尝心酒余味 一场回顾 生生灭灭 明晰心扉 再回顾浅尝心酒余味 作曲 : 脱景麟 作词 : 宜宝 编曲：冯聪 录音：冯聪/刘天鸿 混音：刘天鸿 母带 : 刘天鸿 秋日里的落叶挥手同树作别 </p> </div> <div style=\"大众margin-bottom: 500px;\"大众 class=\公众test\公众 id=\"大众test5\公众> <h1>第四页</h1> <p> 作曲 : 刘伟锋 作词 : 刘伟锋 编曲：刘伟锋 录制混缩：巨人师长西席 出品：西亚斯音频事情室 企划：谭梦 发行公司：恬音文化 说好带你流 末了一句感谢还有多余的抱歉 奔跑在街上大雨淋湿的视线 反反复复的自我欺骗 再分开在之前 没有勇气想的更远 薄暮下模糊的侧脸 遗忘了伤痛的少年 有风险才蜕变 韶光总会说出再见 曾经是心心念念随随便便深深浅浅 爱上了不语不言不计前嫌不知疲倦 向后向前遇见改变 </p> </div> </div></div> </body> </html>
$(document).ready(function () { window.addEventListener(\"大众scroll\"大众, function(event) { var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; $(window).scroll(function () { var top = $(document).scrollTop(); //定义变量，获取滚动条的高度 //var menu = $(\公众#menu\"大众); //定义变量，抓取#menu var items = $(\"大众#content\"大众).find(\公众.test\"大众); //定义变量，查找.item var curId = \公众\"大众; //定义变量，当前所在的楼层item #id items.each(function () { var m = $(this); //定义变量，获取当前类 var mHeight = m.height(); var itemsTop = m.offset().top; //定义变量，获取当前类的top偏移量 if (top >= itemsTop - mHeight/2) { curId = \"大众#\公众 + m.attr(\"大众id\"大众); if(curId == \"大众#test5\公众){ var menu = $(\"大众#menu\"大众); var curLink = menu.find(\公众.sidenav\"大众); curLink.removeClass(\"大众sidenav\"大众); menu.find(\"大众[href='#test5']\"大众).addClass(\"大众sidenav\"大众); }else{ //给相应的楼层设置cur,取消其他楼层的cur var menu = $(\"大众#menu\"大众); var curLink = menu.find(\"大众.sidenav\"大众); if (curId && curLink.attr(\"大众href\公众) != curId) { curLink.removeClass(\"大众sidenav\"大众); menu.find(\"大众[href=\公众 + curId + \"大众]\"大众).addClass(\"大众sidenav\"大众); } } } else { return false; } }); }); });});
