滚动监听的时候,常会用到各种定位,以下记录一下判断滚动条到了元素底的时候触发的一些动作,比如本站的功能菜单,在滚到功能菜单底边贴到浏览器底边以上时,就固定,否则就恢复原来的位置:

  • 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 });