当另一个 div 滚动出 DOM 时如何显示一个 div

Posted 2023-05-08

【中文标题】当另一个 div 滚动出 DOM 时如何显示一个 div

【英文标题】：How to show a div when another div is scrolled out of DOM

【发布时间】：2021-03-16 19:27:50

【问题描述】：

我有一个固定的 div(logo-fixed)，当从顶部滚动 1070px 时出现，但我不希望这样，我喜欢在另一个 div(headerclass) 之后滚动 50 像素时出现 div

如何做到这一点？

9.

这是代码

(function($) 
$(".logo-fixed").css("visibility": "hidden");
    $(document).scroll(function () 
        var y = $(this).scrollTop();
 if (y > 1070) 
$(".logo-fixed").css("visibility": "visible");
            $('.logo-fixed').fadeIn(200);
         else 
            $('.logo-fixed').hide(0);
        
    );
)( jQuery );

.headerclass 
    position:sticky;
        top:0;
    z-index:600;

.logo-fixed 
    position:fixed;
    top:0;
    left:0;
    width:224px;
    height:120px;
    z-index:1000;
    background: url("#");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;   

<div class="headerclass"></div>
<div class="logo-fixed"></div>

【问题讨论】：

您无法将某些内容从 DOM 中滚动出来。当然，在视口之外，但这仍然在 DOM 中。

是的，对不起，我的意思是视口

【参考方案1】：

您可以使用$(.headerclass').scrollTop() 获取headerclass 元素的位置，然后将其与条件中的y 进行比较，而不是1070。

例子：

if (y > 1070)

被替换为

if (y > $(.headerclass').scrollTop() + 50 )