杭州网站建设
1812月

fixed应用

今天在逛人人网时,发现人人网首页左侧的“应用动态”,随着我页面向下滚动,一直固定在网站的左侧。但这效果存在一点瑕疵,在拖动过程中存在一点抖动(ie下),不是非常平滑。我尝试使用jquey实现了该效果,也解决了抖动的问题。现在把它拿出来和大家分享一下。

人人网效果:

思路:

  1. 创建一个ID为sideBar的div,将它的position设置为absolute。
  2. 当页面滚动条的垂直高度超过sideBar的top时,就将它的position设置为fixed。
  3. 当页面滚动条的垂直高度小于sideBar的top时,将它的position重新设置为 absolute。
  4. sideBar要跟网页顶部保持一定距离,所以我们将sideBar的css里设置 “margin-top”(这就是发生抖动的原因)。

Ie6问题:

Ie6不支持fixed属性,所以这效果需要过滤IE6

//判断是否为IE6var msie6 = $.browser == 'msie' && $.browser.version < 7;//浏览器不为ie6if (!msie6) {//效果代码}

 

Css编写:   

*{margin: 0px;padding: 0px;}body{text-align: center;}#wrapper{height: 2000px;position: relative;}#sideBar{width: 100px;height: 300px;position: absolute;top: 0px;left: 100px;background: #999;margin-top: 20px;/*与顶部的距离*/}/*不要写成.fixed ,sideBar 已经设置了position为absolute,.fixed与sideBar原有css属性同级别的,将无法覆盖原有属性。而sideBar.fixed选择的优先级别较高*/#sideBar.fixed{position: fixed;top: 0px;}#content{padding-left: 300px;padding-top: 200px;}#sideWrapper{position: absolute;width:280px;top: 100px;}

防止抖动:

动态应用与网页顶部的高度为sideBar.offset().top

为了避免抖动,我们应该在动应用距离网页窗口还有动态应用设定的magintop

的距离时,将动态应该的position 设置为fixed.

$sideBar.offset().top- parseFloat($sideBar.css("marginTop")

完整的jquery代码:

$(function() { var $sideBar = $("#sideBar");  //左侧栏与顶部的高度var top = $sideBar.offset().top - parseFloat($sideBar.css("marginTop").replace(/auto/,0)); var msie6 = $.browser == 'msie' && $.browser.version < 7;  if (!msie6) { $(window).scroll( //页面滚动条滚动式触发效果 function() { var scrollTop = $(this).scrollTop();//拖动的高度 if(scrollTop > top) { $sideBar.addClass("fixed"); }else{ $sideBar.removeClass("fixed"); } }); } });  
 

版权属于:佚站互联 - 杭州网站建设

原文地址:http://www.yeahzan.com/blog/item/fixed.html

转载时必须以链接形式注明原始出处及本声明。

文章作者: Crs , 文章分类: 网站建设

关于作者

Crs

评论 (0)

发表评论

请登陆后发表评论。