参考GPT和自己的思路:
可以使用以下代码实现:
$(document).ready(function(){
var blueTop = $('#blue').offset().top;
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
if(scrollTop >= blueTop){
$('#black').addClass('fixed');
}else{
$('#black').removeClass('fixed');
}
});
});
上面的代码中,我们首先利用 offset()
方法获取了蓝色元素的位置,然后使用 scroll()
方法监听窗口的滚动事件。当滚动距离大于等于蓝色元素的位置时,给黑色元素添加 fixed
类。在 CSS 中,通过给 fixed
类设置 position:fixed;top:0;left:0;
实现将黑色元素固定在浏览器的顶部。如果滚动距离小于蓝色元素的位置,就将 fixed
类从黑色元素上移除,黑色元素就会返回原来的位置。