Question

jquery 拖动滚动条时悬浮条跟随滚动代码求网友指点

今天看到一个jqeury代码，是利用jquery实现 拖动滚动条时悬浮条跟随滚动并且停留在网页某处。代码如何。html和css就不写了
$(function(){ var divTOP=$("#floatDiv").offset().top; $(window).scroll(function(){ var offsetop=divTOP+$(window).scrollTop()+"px"; $("#floatDiv").animate({top:offsetop},{duration:200,queue:false}) }) })，我的疑问用下面的图来表示。就是offset().top表示滚动条离浏览器顶部的距离，而$(window).scrollTop有包含offset().top。为什么要用加呢？

Answer 1

给你个思路吧：
offset().top 悬浮窗在页面没滚动的时候与页面顶部的距离，这个距离只取了一次所以这个距离从开始就始终没变。
$(window).scrollTop() 是页面已经滚动的距离（是跟随你滚动不断变动的），就是你滚动条往下滚动的距离（页面可是区域顶端与原页面真实顶端的距离）

当页面滚动的时候触发函数$(window).scroll

然而悬浮窗又要保持页面打开时候的位置，那显然就是
悬浮窗原始与顶部距离+页面已经滚动过的距离；

Answer 2

显然你没有搞清楚悬浮条是相对谁定位，照你描述来看应该是position:absolute，这就是相对于文档流顶部进行定位，那么它到文档流顶部距离为多少？显然是$("#floatDiv").offset().top+$(window).scrollTop()，因为body已经向上滚动了$(window).scrollTop()的距离。
当然如果悬浮条为position:fixed，那它就是相对于视窗（浏览器可视化区域）进行定位了，这时候top就只有$("#floatDiv").offset().top了

追问

可以用个图示标注线下吗？谢谢诶