锚点区域fix在页面上
|
1 2 3 4 5 6 7 8 |
<div id="navbar-side-anchor"> <ul> <li class="anchor"><a href="#yusunny-sections-01">区域1</a></li> <li class="anchor"><a href="#yusunny-sections-02">区域2</a></li> <li class="anchor"><a href="#yusunny-sections-03">区域3</a></li> <li class="anchor"><a href="#yusunny-sections-04">区域4</a></li> </ul> </div> |
content 的内容
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<section id="yusunny-sections-01" class="yusunny-sections"> 区域1开始 区域1结束 </section > <section id="yusunny-sections-02" class="yusunny-sections"> 区域2开始 区域2结束 </section > <section id="yusunny-sections-03" class="yusunny-sections"> 区域3开始 区域3结束 </section > <section id="yusunny-sections-04" class="yusunny-sections"> 区域4开始 区域4结束</section > |
实现效果的js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script type="text/javascript"> jQuery(document).ready(function(){ if (jQuery(window).width() >= 900) { jQuery(window).on('scroll', function () { var scroll_height = jQuery(this).scrollTop(); jQuery('.yusunny-sections').each(function(){ var sections_top = jQuery(this).offset().top , sections_bottom = sections_top + jQuery(this).outerHeight(); if (scroll_height >= sections_top && scroll_height <= sections_bottom) { jQuery(this).addClass('active'); jQuery('#navbar-side-anchor').find('a[href="#'+jQuery(this).attr('id')+'"]').parent('.anchor').addClass('active'); } else{ jQuery(this).removeClass('active'); jQuery('#navbar-side-anchor').find('a[href="#'+jQuery(this).attr('id')+'"]').parent('.anchor').removeClass('active'); } }); }); } }); </script> |
js的效果为，当页面滚动时，自动检测锚点对应区域，并给该锚点区域section和对应的锚点添加active标签，保证通过css来实现active效果。