js实现网站侧栏悬浮(图文详解)

发表日期:2015-07-03 09:52文章编辑:深圳网站SEO优化浏览次数:

当文章或者列表一侧过长时,不仅会导致左右两侧参齐不齐,丧失美感,还会影响网站的用户体验,那么,深圳网站建设今天就为大家讲解如何用js实现网站侧栏悬浮。

JS代码

<script language="javascript">
  <!--
  $(window).scroll(function() {
  var scrolltop = $(window).scrollTop();
  if (!$.browser.msie || $.browser.version>=7) {
  if (scrolltop >= 800) {
   
  $("#right_content").addClass("ffi").fadeIn("normal");
  } else {
  $("#right_content").removeClass("ffi");
  }
  }
  });
   
  -->
   
  </script>

#right_content为所选模块的ID ,ffi是一个悬浮的样式(如下)

.ffi {
position: fixed;
top: 30px;
_position: absolute;
overflow: hidden;
_overflow: visible;
z-index: 1000;}

此外还需要一个JS,点击此处保存下载


效果如下:



参考链接:http://www.szqchl.com.cn/read/SEOyouhua/2015/0521/64.html
如没特殊注明,文章均为企创互联原创,转载请注明来自:http://www.szqchl.com.cn/wangzhanjianshe/67.html