转载

[原创作品]web网页中的描点

因为近来在从事web前端开发的工作，所以写的文章也都是关于web这一块。以后将分享算法和web高级编程的内容，很多公司的web前端不够重视，以为是很low-level，给的待遇也很一般，其实，这都是很狭隘的理解。软件开发是一种很谨慎的工作，每一个环节都需要足够的重视。好了，不扯淡。需要扯淡的，点击左边信息栏加群按钮。

今天分享的内容是网页描点效果，就是在网页滚动到某个位置时，菜单有相应的变化。如图，

[原创作品]web网页中的描点

就是在滚动时，菜单会有相应的选中效果，点击菜单时，定位到网页内容。

菜单代码：

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         });