Question

我有一个类似于airbnb主页的效果，它有一个How it Works按钮，可以切换推动整个页面的Div。我能够实现这一点，但是在用户滚动到切换div（#slideDown）的底部之后，一旦它离开网站，它就会消失，用户发现自己向下滚动而不是在页面顶部再一次。

基本上，我希望用户能够向下滚动div（因此它在屏幕外），然后保持它们在页面上的确切位置，而不是在div被隐藏后被按下。

小提琴：https://jsfiddle.net/c60cw8r1/

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

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>

CSS：

#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;
}

JS：

$('#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 {

        }


    }
});

Answer 1

这个问题正在发生，因为当你隐藏你的＆＃34;它如何运作＆＃34;元素，身体没有回到它的原始滚动位置。

我分叉你的小提琴并在这里添加你想要的效果https://jsfiddle.net/6xkurfuj/。

我刚添加了这行

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

这是＆＃34;它如何运作＆＃34;元素是隐藏的。

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

1 个答案: