CODEWITHSUNDEEP
javascriptjqueryslidetogglescrolltop
Codigit
Codigit

Reputation: 71

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

i'am trying to make the airbnb.nl effect where a 'how it works' div appears from the top on button click. Then when you scroll down (or click the close button) it disappears again.

When the div is hide after scrolling to 630px the scrollbar shoots up so i've set the scrollbar to 0 at the same time. Problem is that it keeps repeating this 'scrollTop to 0' script when you scroll down further, making it a unwanted loop.

Any suggestions on how to only use this script (scrollTop -> 0) once, while the div is shown? Or maybe even prettier solutions? ;)

This is where it's live: www.energyguards.nl (and i disabled the scrollTop function there for now)

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

Hope to hear from you guys,

cheers Joeri

Upvotes: 0

Views: 498

Answers (1)

yeyene
yeyene

Reputation: 7380

Check this DEMO out http://jsfiddle.net/yeyene/46o7chfu/1/ Hope you means like this.

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

Upvotes: 1

Related Questions