CODEWITHSUNDEEP
jqueryscrollshow-hide
Dan
Dan

Reputation: 265

Show/Hide Div on Scroll

I have a div that sits at the bottom of a slideshow that I want to disappear when the user scrolls or uses down arrow then reappears when scrolls back to the top. I am guessing this is incorporating the jquery scroll functionality?

Upvotes: 19

Views: 152077

Answers (6)

Priyank Patel
Priyank Patel

Reputation: 6996

<div>
  <div class="a">
    A
  </div>
</div>​


$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $('.a').fadeOut();
  } else {
    $('.a').fadeIn();
  }
});

Sample

Upvotes: 84

Quatban Taco
Quatban Taco

Reputation: 346

$.fn.scrollEnd = function(callback, timeout) {          
  $(this).scroll(function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

$(window).scroll(function(){
    $('.main').fadeOut();
});

$(window).scrollEnd(function(){
    $('.main').fadeIn();
}, 700);

That should do the Trick!

Upvotes: 0

DragonKnight
DragonKnight

Reputation: 1870

Here is my answer when you want to animate it and start fading it out after couple of seconds. I used opacity because first of all i didn't want to fade it out completely, second, it does not go back and force after many scrolls. 

$(window).scroll(function () {
    var elem = $('div');
    setTimeout(function() {
        elem.css({"opacity":"0.2","transition":"2s"});
    },4000);            
    elem.css({"opacity":"1","transition":"1s"});    
});

Upvotes: 1

Madhavi Mangapati
Madhavi Mangapati

Reputation: 37

Try this code

$('window').scrollDown(function(){$(#div).hide()});

$('window').scrollUp(function(){ $(#div).show() });

Upvotes: 1

user1120073
user1120073

Reputation:

i have a pretty answer try this code ;)

<div id="DivID">
</div>

$("#DivID").scrollview({ direction: 'y' });
$("#DivID > .ui-scrollbar").addClass("ui-scrollbar-visible");

Upvotes: -1

Arun Killu
Arun Killu

Reputation: 14233

$(window).scroll(function () {
  var Bottom = $(window).height() + $(window).scrollTop() >= $(document).height();
if(Bottom )
{
$('#div').hide();
}
});

Upvotes: 2

Related Questions