JS+CSS实现侧边栏跟随浏览器滚动效果

2021-05-22 0 1,787 百度已收录

不少blog文章页的侧边栏都可以随着浏览器滚动而停留在页面,这对于长幅文章来说最好不过了。其实我们也可以用这种特效,只需简单的几个代码。下面就介绍转自卢松松blog的代码。

实现侧边栏跟随特效的方法:

添加css:

  1. /*侧栏跟随*/
  2. #box{float:left;position:relative;width:250px;}.div1{width:250px;}.div2{position:fixed;_position:absolute;top:0;z-index:250;}

如贵站的侧边栏宽度不是250px,请另行修改!

添加js:

  1. //侧栏跟随
  2.  
  3. (function(){
  4.  
  5. var oDiv=document.getElementById("float");
  6.  
  7. var H=0,iE6;
  8.  
  9. var Y=oDiv;
  10.  
  11. while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
  12.  
  13. iE6=window.ActiveXObject&&!window.XMLHttpRequest;
  14.  
  15. if(!iE6){
  16.  
  17. window.onscroll=function()
  18.  
  19. {
  20.  
  21. var s=document.body.scrollTop||document.documentElement.scrollTop;
  22.  
  23. if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}
  24.  
  25. else{oDiv.className="div1";}
  26.  
  27. };
  28.  
  29. }
  30.  
  31. })();

将这段代码保存为js文件,如:loome.js,然后在贵站需要实现这个功能的网页中添加以下代码:

  1. <script type="text/javascript" src="http://js文件地址/loome.js"></script>

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 JS+CSS实现侧边栏跟随浏览器滚动效果 https://zhutizhen.com/14301.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章