Javascript 一旦div离开屏幕，将其隐藏，并让用户保持在页面上的相同位置

我有一个像airbnb主页的效果，它有一个如何工作的按钮，切换一个向下推整个页面的Div。我能够做到这一点，但在用户滚动到切换div的底部（#slideDown）后，一旦它离开站点，它就会消失，用户发现自己被向下滚动，而不是再次滚动到页面顶部

基本上，我希望用户能够向下滚动过去的div（所以它是屏幕外的），然后留在页面上，而不是被按下后，div被隐藏

小提琴：

在小提琴中，当你向下滚动时，它应该让你停留在Wrap1，而不是Wrap2

HTML:

<div id="slideDown" style="position: relative; display: none;">
    <a class="howClose" href="#">
        <span class="screenReader">
            Close How It Works
        </span>
            ×
    </a>

</div>
  <div id="grabPromo" style="text-align: center;"><a href="#">How It Works</a></div>
<div class="site-wrapper">
  Wrap1
</div>
<div class="site-wrapper">
  Wrap2
</div>

#slideDown {
    background:#ace; 
    display: none; 
    clear: both; 
    height: 600px;
    top: 0px;
    z-index: 1000;

}

.howClose {
    color: #007a87;
    position: absolute;
    right: 25px;
    top: 25px;
    opacity: 0.6;
}

.screenReader {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    font-size: 25px;
    width: 1px;
}   

.site-wrapper {
  height: 600px;
}

$('#grabPromo').click(function(e){
    $('.site-wrapper').before( $('#slideDown') );
    $('#slideDown').slideToggle();
});

$('#closePromo').click(function(e){

    $('#slideDown').slideUp();
});

$('.howClose').click(function(e){

    $('#slideDown').slideUp();
});

var closeTop = $('.site-wrapper').offset().top;
$(window).scroll(function() {
    if ($(window).scrollTop() > 580) {
        if ($('#slideDown').css('display') != 'none') {

            $('#slideDown').hide();
        }
        else {

        }


    }
});

JS:

<div id="slideDown" style="position: relative; display: none;">
    <a class="howClose" href="#">
        <span class="screenReader">
            Close How It Works
        </span>
            ×
    </a>

</div>
  <div id="grabPromo" style="text-align: center;"><a href="#">How It Works</a></div>
<div class="site-wrapper">
  Wrap1
</div>
<div class="site-wrapper">
  Wrap2
</div>

#slideDown {
    background:#ace; 
    display: none; 
    clear: both; 
    height: 600px;
    top: 0px;
    z-index: 1000;

}

.howClose {
    color: #007a87;
    position: absolute;
    right: 25px;
    top: 25px;
    opacity: 0.6;
}

.screenReader {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    font-size: 25px;
    width: 1px;
}   

.site-wrapper {
  height: 600px;
}

$('#grabPromo').click(function(e){
    $('.site-wrapper').before( $('#slideDown') );
    $('#slideDown').slideToggle();
});

$('#closePromo').click(function(e){

    $('#slideDown').slideUp();
});

$('.howClose').click(function(e){

    $('#slideDown').slideUp();
});

var closeTop = $('.site-wrapper').offset().top;
$(window).scroll(function() {
    if ($(window).scrollTop() > 580) {
        if ($('#slideDown').css('display') != 'none') {

            $('#slideDown').hide();
        }
        else {

        }


    }
});

---

发生此问题的原因是，当您隐藏“它是如何工作的”元素时，主体不会返回到其原始滚动位置

我用叉子叉了叉你的小提琴，在这里加上了你想要的效果

我刚加了一行

$("body").scrollTop($("#wrap_1").offset().top - 20);

---

“它是如何工作的”元素被隐藏后运行的。

我找不到它是如何工作的（尽管我找到了链接）弹出窗口，请不要在airbnb页面上滑动任何内容。不确定您的意思。你能看到我手头的问题吗？当你滑过div时，它消失了，它会让你滑得更远