关闭边栏(ESC)打开边栏(ESC)
滚动监听的时候,常会用到各种定位,以下记录一下判断滚动条到了元素底的时候触发的一些动作,比如本站的功能菜单,在滚到功能菜单底边贴到浏览器底边以上时,就固定,否则就恢复原来的位置:
- div.offset().top:表示div离文档顶部距离,注意不是距离窗口的高度
- div.position().top:表示div距离父元素顶部的高度,父元素要设置positon,否则其值就等于offset.top
- 元素的高度:height、innerHeight(高度+补白)、outerHeight(高度+补白+边距)
- 文档的高度:$(document).height(),窗体的高度:$(window).height()
- 滚动条的高度:$(document).scrollTop()
- 滚动条最大值=文档高-窗体高,即:$(document).height() – $(window).height()
- 判断滚动条是否到底部:$(document).scrollTop()>=$(document).height() – $(window).height()
- 获取元素离底部的高度:$(document).height() – div.offset().top – div.innerHeight()
- 判断元素底边是否贴到窗体底边:$(document).scrollTop()<=div.offset().top + div.outerHeight(true) – $(window).height();这个的算法其实是把元素当成body,滚动条到底了就相当是元素贴底边了。精确计算要考虑到边框,所以用outerHeight(true);
- 滚动到指定元素:先取得元素的pos=div.offset().top,再滚动:$(“html,body”).animate({ scrollTop: pos });
考虑到动态加载,本站在计算元素贴底边时,这样写:
var featureH=$(‘.footer-feature’).position().top + $(‘.footer-feature’).outerHeight(true)
if (scrollTop<=bodyH - windowH -(footerH - featureH)) {...}