技术请教：此处$('body').height()的返回值及作用是什么？

首先看这段代码的逻辑：当页面滚动到特定位置时，给<body>添加/移除sticky类。其中$('body').height()的核心作用是获取整个页面的总高度（即<body>元素的实际高度，包含超出浏览器视口的滚动内容部分）。

具体计算逻辑拆解 #

代码里的阈值计算：

var box = $('body').height() - $('#impact_calculator').height() - 450;

这个式子是在计算一个滚动触发的临界值，具体含义是：

• $('body').height()：拿到页面整体的总高度
• 减去$('#impact_calculator').height()：去掉目标元素自身的高度
• 再减去450px：额外留出450px的距离

最终得到的box值，代表页面滚动条需要滚动到的垂直距离——当滚动距离scrollTop大于等于这个值时，就会触发给<body>添加sticky类的操作。

换个通俗的说法：这个逻辑是在判断「滚动条是否滚动到了距离页面底部还有#impact_calculator高度 + 450px的位置」，一旦滚到这个位置附近，就启用sticky类的样式。

对比注释掉的旧代码：

// var box = $('#impact_calculator').offset().top -190;

旧逻辑是基于目标元素的顶部位置来触发，而新逻辑改成了基于页面底部的相对位置来触发，这就是为什么需要用到页面总高度$('body').height()来做计算。

补充说明 #

• 这里用setTimeout延迟500ms执行类的添加/移除，是为了避免滚动过程中频繁触发DOM操作，减少性能消耗。
• 先判断$('#impact_calculator').length是为了确保目标元素存在时才绑定滚动事件，避免报错。

内容的提问来源于stack exchange，提问作者Vishant Sehrawat