页面滚动指定高度时添加样式或动画
Posted 罗点点
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面滚动指定高度时添加样式或动画相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/> <link rel="stylesheet" type="text/css" href="css/main.css"/> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <title></title> </head> <body> <div class="nav" id="menu"> <ul> <li><a href="#first" class="cur">首 页</a></li> <li><a href="#second">关 于 我</a></li> <li><a href="#third">工作经验</a></li> <li><a href="#forth">项目经验</a></li> <li><a href="#fifth">联 系 我</a></li> </ul> </div> <div id="content"> <div class="first item" id="first"> <div class="middle"> <img src="img/头像.jpg" alt="头像" /> <p>生活是一种绵延不绝的渴望，渴望不断上升，变得更伟大而高贵。</p> <div class="myName"> <span>我叫王春</span> <span>一名前端工程师</span> <span>[email protected]</span> </div> <div class="goTop"> </div> </div> </div> <div class="aboutMe item" id="second"> <div class="middle"> <h1>关于我</h1> <ul class="clearfix"> <li class="fl"> <img src="img/ege.gif" alt="年龄"> <p></p> </li> <li class="fl"> <img src="img/college.gif" alt="学历"> <p></p> </li> <li class="fl"> <img src="img/adds.gif" alt="地址"> <p></p> </li> <li class="fl"> <img src="img/sta.gif" alt="状态"> <p></p> </li> </ul> <div class="skill"> <p>两年多的互联网经验，一年全职前端开发</p> <p>熟练运用HTML5与CSS3的前端网页开发技能</p> <p>熟悉javascript交互与ajax后台数据读取</p> <p>会使用bootstrap等前端开发框架快速编写页面</p> </div> </div> </div> <div class="experience item" id="third"> <div class="comWidth"> <h1>工作经验</h1> <div class="company"> <p> <strong>公司名称：陕西听讯科技有限公司</strong> <strong>工作时间：2016/6-至今</strong> </p> <strong>工作职责：</strong> <ul> <li>1.根据产品需求，负责Web端HTML+CSS+JS的开发和优化；</li> <li>2.和设计师及后台工程师配合，高效率高质量完成工作，为用户提供更好的视觉操作；</li> <li>3.负责公司产品前端的维护及更新迭代；</li></tr> <li>4.完成自测的过程；</li> <li>5.完成公司领导交办的其它任务</li> </ul> </div> </div> </div> <div class="products item" id="forth"> <div class="comWidth"> <h1>项目经验</h1> <ul class="clearfix"> <li> <h3>项目名称：智慧易购</h3> <img src="img/智慧易购.png"/ alt="智慧易购"> <p><strong>项目描述：</strong>一款移动端购买商品的微信公众号</p> <p><strong>主要职责：</strong>页面结构及样式的搭建，测试及部分交互功能</p> <p><a href="#">链接...</a></p> </li> <li> <h3>项目名称：跳出圈圈</h3> <img src="img/jumpout.png"/ alt="跳出圈圈"> <p><strong>项目描述：</strong>一款移动端购买商品的手机app</p> <p><strong>主要职责：</strong>页面结构及样式的搭建，测试及部分交互功能</p> <p><a href="#">链接...</a></p> </li> <li> <h3>项目名称：海峡两岸青年创业大赛</h3> <img src="img/young.png"/ alt="青赛"> <p><strong>项目描述：</strong>pc端海峡两岸青年创业大赛报名登录，比赛决赛等线上模式</p> <p><strong>主要职责：</strong>页面结构及样式的搭建，测试及部分交互功能</p> <p><a href="#">链接...</a></p> </li> <li> <h3>项目名称：网站首页</h3> <img src="img/网站首页.png"/ alt="慕课网首页"> <p><strong>项目描述：</strong>公司官网首页</p> <p><strong>主要职责：</strong>仿照官网，编写网站首页，添加交互功能</p> <p><a href="#">链接...</a></p> </li> <li> <h3>项目名称：电商网站</h3> <img src="img/电商网.png"/ alt="电商网"> <p><strong>项目描述：</strong>一款移动端购买商品的微信公众号</p> <p><strong>主要职责：</strong>页面结构及样式的搭建，测试及部分交互功能</p> <p><a href="#">链接...</a></p> </li> <li> <h3>项目名称：bootstrap框架运用</h3> <img src="img/bootstrap.png"/ alt="bootstrap框架运用"> <p><strong>项目描述：</strong>bootstrap框架运用</p> <p><strong>主要职责：</strong>使用bootstrap框架制作响应式开发</p> <p><a href="#">链接...</a></p> </li> </ul> </div> </div> <div class="contact item" id="fifth"> <div class="middle"> <h1>联系我</h1> <p><span class="orange">灵感</span><span class="sky">代码</span><span class="apple">梦想</span><span class="orange2">未来</span></p> <div class="myc"> <p>注重效率，偏爱敏捷开发</p> <p>喜欢尝试，期待新鲜事物</p> <p>前端即兴趣，兴趣即未来</p> <p>行路有良友，便是捷径</p> <p>带上我吧，一起看更广阔的代码世界</p> </div> <p class="tel">联系电话：15229074105</p> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(){ var top = $(document).scrollTop(); //定义变量，获取滚动条的高度 var menu = $("#menu"); //定义变量，抓取#menu var items = $("#content").find(".item"); //定义变量，查找.item var curId = ""; //定义变量，当前所在的楼层item #id items.each(function(){ var m = $(this); //定义变量，获取当前类 var itemsTop = m.offset().top; //定义变量，获取当前类的top偏移量 // console.log("scrollTop : " + top); // console.log("offset.top : " + itemsTop); if(top > itemsTop-100){ curId = "#" + m.attr("id"); }else{ return false; } }); //给相应的楼层设置cur,取消其他楼层的cur var curLink = menu.find(".cur"); if( curId && curLink.attr("href") != curId ){ curLink.removeClass("cur"); menu.find( "[href=" + curId + "]" ).addClass("cur"); } // console.log(top); }); }); </script> </body> </html>
以上是关于页面滚动指定高度时添加样式或动画的主要内容，如果未能解决你的问题，请参考以下文章