javascript - 像 Airbnb 一样，切换从顶部出现(下推)的 div 后，将滚动条设置为零(一次)

Question

我正在尝试制作airbnb.nl效果，其中单击按钮时顶部会出现“工作原理”div。然后，当您向下滚动(或单击关闭按钮)时，它会再次消失。

当div在滚动到630px后隐藏时，滚动条会弹出，所以我同时将滚动条设置为0。问题是，当您进一步向下滚动时，它会不断重复此“scrollTop to 0”脚本，从而使其成为不必要的循环。

关于如何在显示 div 时仅使用此脚本 (scrollTop -> 0) 一次，有什么建议吗？或者甚至可能是更漂亮的解决方案？ ;)

这是它的实时位置:www.energyguards.nl(我暂时禁用了那里的scrollTop功能)

jQuery(document).on('click', '.flip', function(e){
            e.preventDefault();
            jQuery(".panel").slideToggle("slow");
        });

$(window).scroll(function(){
          if($(this).scrollTop() > 630) $('.panel').hide();
          if($(this).scrollTop() > 630) $(window).scrollTop( 0 );
        }); 

希望收到大家的来信

干杯乔里

Answer 1

查看此演示 http://jsfiddle.net/yeyene/46o7chfu/1/ 希望你的意思是这样的。

JQUERY

$(document).ready(function () {
    // scroll to top and show top content
    $('#show_top_bar').on('click',function(){
        $('html, body').stop().animate({
           scrollTop: 0
        }, 300, function() {
           $('#top_bar').slideDown(300);
        });
    });
    
    // hide top content on click close icon
    $('#close_top_bar').on('click',function(){
        $('#top_bar').slideUp(100);
    });
});

$(window).scroll(function() {
    // hide top content when scroll position is top of content 
    if($(this).scrollTop() > $('#content').position().top){
        if($('#top_bar').css('display') !== 'none') {
            $('#top_bar').slideUp(0);
            $('html, body').stop().animate({
               scrollTop: 0
            }, 0 );
        }
    }
});