Wordpress主题交流群:565616228 进群记得看公告!

分享一段jQuery侧边滚动至顶部固定代码

文章目录
  1. 代码分享

写网站的应该都有一个共同的爱好,就是喜欢收集优秀的代码案例,不管事自己写的还是无意中看到的,只有优秀总会忍不住的拿来研究一番,然后整理出来以便开发的时候使用,今天给大家分享一段简洁代码精炼的侧边顶部固定层的效果,这个方法是用jQuery实现的,所以请检查您的页面是否引入了jQuery脚本版本1.7以上即可。

代码分享

其实这个特效相对来说还是比较复杂的,首先我们要使用JavaScript进行窗口监听,当设定的div距离顶部一定距离的时候(这个值自己设置的)个div添加绝对定位的参数,代码如下:
html代码:

  1. <div class="main"></div>//左侧模块
  2.     <div class="sub">//右侧模块
  3.         <div class="sub01"></div>
  4.         <div class="sub01"></div>
  5.         <div class="fixed">我是固定的哟</div> //侧边浮动模块    
  6.     </div>
查看效果保存代码评论后刷新页面再来下载吧!尽量避免敏感词汇哦要不然需要管理员审核通过才能下载。。

jQuery代码:

  1. $(document).ready(function(e) {
  2.     t = $('.fixed').offset().top;
  3.     mh = $('.main').height();
  4.     fh = $('.fixed').height();
  5.     $(window).scroll(function(e){
  6.         s = $(document).scrollTop();
  7.         if(s > t - 10){
  8.             $('.fixed').css('position','fixed');
  9.             if(s + fh > mh){
  10.                 $('.fixed').css('top',mh-s-fh+'px');
  11.             }
  12.         }else{
  13.             $('.fixed').css('position','');
  14.         }
  15.     })
  16. });

css代码:

  1. <style type="text/css">
  2. *{padding:0px;margin:0px;}
  3. .box{width:1000px;background:#ccc;margin:0 auto;overflow:hidden;}
  4. .main{width:770px;height:3000px;background:#000;float:left;}
  5. .sub{width:220px;background:#FC6;float:rightright;}
  6. .sub01{width:220px;height:100px;background:#0CC;margin-bottom:10px;}
  7. .fixed{width:220px;height:300px;background:#F66;font:normal 13px/30px \5FAE\8F6F\96C5\9ED1;text-align:center;top:10px;}
  8. </style>

教程已完结是不是非常简洁,以前需要几K的代码,现在一小段就搞定了,我博客侧边也是用的这一段,无错运行,性能不错!

来源:本文由晨星博客原创撰写,欢迎分享本文,转载请保留出处和链接!
评论广告

1条评论

  • _草根@5001759  

    等待 持续关注着1

评论已关闭!