SHESHUI.ME

JS动态实现滚动后位置固定

最后更新 Jun 07, 2018

JS动态实现滚动后位置固定

Html 结构

  <div id="latest-articles" class="widget">
  <txp:if_section name="articles"><h3>最新文章 <span class="en">Recently</span></h3>
    <txp:recent_articles section="articles" label="" break="li" wraptag="ul" />
  <txp:else /><h3>最新日志 <span class="en">Recently</span></h3>
     <txp:article_custom section='blogs' listform='article_list' />
  </txp:if_section>
  </div>

Js 部分

  $(document).ready(function() {  
   // check where the shoppingcart-div is  
   var offset = $('#latest-articles').offset(); 
   $(window).scroll(function () {  
     var scrollTop = $(window).scrollTop(); // check the visible top of the browser  
     if (offset.top<scrollTop) $('#latest-articles').addClass('fixed');  
     else $('#latest-articles').removeClass('fixed');  
    });  
  }); 
  // ref: http://stackoverflow.com/questions/5273453/using-jquery-to-keep-scrolling-object-within-visible-window
Textpattern 文章专题

评论

comment

暂无留言。

* 先[预览],后[提交]。

目录