CODEWITHSUNDEEP
javascriptjqueryhtmlcssfrontend
Linh Nguyễn
Linh Nguyễn

Reputation: 275

Show div after scrollDown then scrollUp to top

I want to show hidden div after scrollDown then scrollUp to top. This means that after I scroll down and then scroll up to top, the hidden div is show.

This is my js, but it's just scrollDown. 

$(document).scroll(function() {
  let y = $(this).scrollTop();
  if (y > 100) {
    $('.latest_news').fadeIn();
   } else {
     $('.latest_news').fadeOut();
  }
});

I don't know how to after scrollUp, that div show for me?

Thank you.

Sorry about my English.

Upvotes: 0

Views: 238

Answers (2)

Ogie
Ogie

Reputation: 1324

$(document).scroll(function() {
    if ($(this).scrollTop() === 0 && $(".latest_news").is(":hidden")) {
      $(".latest_news").fadeIn();
    } else {
      $(".latest_news").fadeOut(); // remove this else block if you do not want hidden on every scroll down
    }
});

Upvotes: 2

seunggabi
seunggabi

Reputation: 1822

I give you solution.
This is very simple.
You need to know scroll direction.

var lastScrollTop = 0;
$(window).scroll(function(event) { 
  var st = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

  if (st > lastScrollTop) { 
  // downscroll code 

  } else { 
  // upscroll code 
  } 

  lastScrollTop = st; 
});

reference my blog: https://seunggabi.tistory.com/entry/JS-Browser-get-scroll-direction

Upvotes: 0

Related Questions