广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    jQuery 固定位置随滚动条滚动效果

    2018-04-03 22:13:15 次阅读 稿源:互联网
    零七广告

    代码(基于jQuery):

    1. //侧栏随动 
    2. var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 
    3.     rollSet = $('.search,.weibo,.group,.feed-mail,.tags'); //添加rollStart之前的随动区块 
    4.  
    5. rollStart.before('<div class="da_rollbox" style="position:fixed;background-color:#fff;width:inherit;"></div>'); 
    6. var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(); 
    7. objWindow.scroll(function() { 
    8.     if (objWindow.scrollTop() > offset.top){ 
    9.         if(rollBox.html(null)){ 
    10.             rollSet.clone().prependTo('.da_rollbox'); 
    11.         } 
    12.         rollBox.show().stop().animate({top:0,paddingTop:15},400); 
    13.     } else { 
    14.         rollBox.hide().stop().animate({top:0},400); 
    15.     } 
    16. }); 

    请留意注释的地方,是需要根据你的需求添加模块class或者id的。值得注意的是第五行的背景色,默认是白色!

    Tips:IE6的粉丝可以加些不支持fixed的代码,这部分浩子不加说明了,你懂的!

    ok,还有不懂的可以参见之前的jQuery 随滚动条滚动效果 (适用于内容页长文章),也可以下面留言拍砖!

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告