Question

html页面元素原本固定，鼠标滚动后相对页面定位了

页面刚加载出来的时候，没有滚动，画框部分都是固定好的

滚动一点点，画框部分还是原来的位置，猜想是滚动的高度不够

这时候滚动的多了，画框部分明显开始相对页面定位了

求详细解释，最好贴出代码





Answer 1

代码就不写了，思路就是当浏览器滚动到某个位置时改变元素的position属性。
比如当浏览器的scrollTop > 500时，就改变元素的position:
if(scrollTop > 500) {
el.style.position = 'fixed';
} else {
el.style.position = 'static';

}
这个500只是随便指定的一个数字，具体由你自己指定，一般由程序获得。
假设页面有一个参照元素，当浏览器滚动位置超过这个参照元素位置时就使头部固定。
一般是用element.offsetTop获得

追问

思路差不多，
那么当element.offsetTop不符合定位的时候，position 应该给什么值让元素重新固定呢？
还有就是如何触发if(scrollTop > 500) 这个判断呢？

在线等，谢谢

追答

在页面加载的时候就应该算出头部距离顶部的高度了，不符合定位条件的时候，把这个值赋给el.style.top，或者直接去掉影响头部位置的任何属性，回到初始状态。

监听浏览器的scroll事件可以获得当前浏览器滚动位置：
window.onscroll = function() {
document.title = document.documentElement.scrollTop || document.body.scrollTop;

}