因为近来在从事web前端开发的工作,所以写的文章也都是关于web这一块。以后将分享算法和web高级编程的内容,很多公司的web前端不够重视,以为是很low-level,给的待遇也很一般,其实,这都是很狭隘的理解。软件开发是一种很谨慎的工作,每一个环节都需要足够的重视。好了,不扯淡。需要扯淡的,点击左边信息栏加群按钮。
今天分享的内容是网页锚点效果,就是在网页滚动到某个位置时,菜单有相应的变化。如图,
就是在滚动时,菜单会有相应的选中效果,点击菜单时,定位到网页内容。
菜单代码:
1 <ul class="menu"> 2 <li><a href="#about-us">关于我们</a></li> 3 <li><a href="#dynamic">动态</a></li> 4 <li><a href="#case">案例</a></li> 5 <li><a href="#service">服务</a></li> 6 <li class="select"><a href="#index">首页</a></li> 7 </ul>
锚点的话就是在网页相应的位置加上id属性,这里是在section标签加的id,就行。重点看js代码:
1 $(window).scroll(function () { 2 3 $('section[id]').each(function(){ 4 var id = $(this).attr('id'); 5 var offsetTop = document.getElementById(id).getBoundingClientRect().top; 6 var offsetBtm = document.getElementById(id).getBoundingClientRect().bottom; 7 8 if(offsetTop < 0 && offsetBtm > 0) { 9 $('.menu li a[href]').parent().removeClass('select'); 10 $('.menu li a[href=#'+id+']').parent().addClass('select'); 11 } 12 }); 13 14 });
上面代码中getBoundingClientRect()的作用的将选取的dom元素作为矩形,其相对的位置是浏览器窗口的大小。.top是dom元素上边距距离浏览器窗口上边的距离,.bottom是dom元素下边距距离窗口上边距的距离。说白了,就是以浏览器左边,上边为基准。还有.left, .right,这个,博友应该明白什么意思了。当上边距小于等于0,且下边距大于0说明该元素在当前浏览器视图中。改变菜单的选中状态。
因为a标签在li里面,而选中状态在li class="select",所以点击时应该这样写,
1 $('.menu li').click(function(){ 2 window.location = $(this).find('a').attr('href'); 3 $(this).siblings().removeClass('select'); 4 $(this).addClass('select'); 5 });
就是加上window.location,让页面跳转到相应的元素。
好了,这部分不是难点,不做多余解释。原创作品,转载请注明出处:http://zhutty.cnblogs.com