日期:2014-05-16  浏览次数:20315 次

计算某DIV到顶部距离是否可能?
如:
<header></header> 
<div></div>
.
.
<div></div> /** 这些内容的高度不定! **/
<div id="fixed-bar"></div>

当滚动到fixed-bar时, fixed-bar就固定在顶部。
类京东 http://www.360buy.com/product/542126.html 滚动到“商品介绍栏”的位置,“商品介绍栏”会固定在顶部的效果


我的思路是,如果能计算fixed-bar到顶部距离,那么其他就好办了,怎么写呢?

如果无法计算该距离,那需要如何巧妙实现该功能呢,请教了

------解决方案--------------------
滚动条滚动的时候 判断下document.getElementById("fixed-bar").getBoundingClientRect().top是否等于0 如果等于0 就fixed在顶部
------解决方案--------------------
如你所说 看京东的。
我觉得他应该是这样做的: js判断"fixed-bar" 有没有到达页面顶端。如果到达加上下面这段class
判断一个容器是否到达页面顶端可以网上搜搜
.nav-fixed {
position: fixed;
top: 0;
}
------解决方案--------------------
window.onload的时候存储导航距离顶部的距离,滚动时判断是否到达导航条,参考:javascript滚动到导航条时如何固定导航条


------解决方案--------------------
1:监听onscroll事件
2:获取对应的菜单的顶部偏移值,滚动到大于或等于此值时,非IE6直接[position: fixed]静止定位即可,IE6下需要额外实现
3:继续滚动时,以某一个指定对象做为参照,当滚动到大于或等于指定对象的顶部偏移值时,隐藏它

基本思路就是让它一个坐标区间内完成静止定位的功能
------解决方案--------------------
 function getAbsPoint(e)
{
    var x = e.offsetLeft;
    var y = e.offsetTop;
    while(e = e.offsetParent)
    {
        x += e.offsetLeft;
        y += e.offsetTop;
    }
    return {'x': x, 'y': y};
};