在像 Airbnb 一样从顶部（向下推）出现 div 后，将滚动条设置为零（一次）

Question

我正在尝试制作 airbnb.nl 效果，点击按钮时 'how it works' 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 );
        }
    }
});

在像 Airbnb 一样从顶部（向下推）出现 div 后，将滚动条设置为零（一次）

Set scrollbar to zero (once) after toggle a div appearing from top (push down) like Airbnb

javascript

jquery

slidetoggle

scrolltop

JQUERY