html 隐藏元素向下滚动并显示在scrloo顶部

Posted 2021-05-11

// Hide element on scroll down & show on scrloo top
var previousScroll = 0,
    elementToHide = $('.header');

$(window).scroll(function(event) {
  var currentScroll = $(this).scrollTop();

  if (currentScroll > previousScroll && currentScroll > elementToHide.outerHeight()) {
    elementToHide.css('top', -elementToHide.outerHeight());
  } else {
    elementToHide.css('top', 0);
  }

  previousScroll = currentScroll;
});

// Hide element on scroll top & show on scrloo bottom
var previousScroll = 0,
    elementToHide = $('.header');

$(window).scroll(function(event) {
  var currentScroll = $(this).scrollTop();

  if (currentScroll > previousScroll && currentScroll > elementToHide.outerHeight()) {
    elementToHide.css('bottom', -elementToHide.outerHeight());
  } else {
    elementToHide.css('bottom', 0);
  }

  previousScroll = currentScroll;
});

// if slide from top
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  transition: all .25s ease-in-out;
}

// if slide from bottom
.header {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  transition: all .25s ease-in-out;
}

<div class="header">
  <ul>
    <li><a href="#">text_1</a></li>
    <li><a href="#">text_2</a></li>
    <li><a href="#">text_3</a></li>
    <li><a href="#">text_4</a></li>
    <li><a href="#">text_5</a></li>
  </ul>
</div>

<div class="box"></div>