用jq怎么实现将蓝色位置在浏览器一打开显示在浏览器最上方,滑动时候能够显示出黑色区域位置

图片说明

参考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 类从黑色元素上移除,黑色元素就会返回原来的位置。