用户向下滚动而不是向上滚动时显示css？

Question

我找到了这个教程http://benweiser.com/add-a-sticky-top-bar-widget-to-genesis-that-hides-and-reveals-on-scroll/并且喜欢这个主意。

jQuery(document).ready(function($) {
// Hide Top bar on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var topbarHeight = $('.top-bar').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();


    if(Math.abs(lastScrollTop - st) <= delta)
        return;


    if (st > lastScrollTop && st > topbarHeight){
        // Scroll Down
        $('.top-bar').removeClass('bar-down').addClass('bar-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('.top-bar').removeClass('bar-up').addClass('bar-down');
        }
    }

    lastScrollTop = st;
}

});

我想知道当用户向上滚动时是否存在与隐藏栏相反的方法，但在向下滚动时显示它。

我有兴趣在其上放置一些共享按钮，并在用户向上滚动时显示按钮不会非常有效。

Answer 1

我不明白这个问题，因为在if-else块中还有：

// Scroll Down

和

// Scroll Up

因此，当您想要在用户向下滚动时添加内容时将代码放入IF，如果用户向上滚动则将其添加到ELSE。

在这种情况下：切换IF和ELSE的代码。

Answer 2

不是CSS而是Jquery示例

向下滚动 - 顶部栏可见，向上滚动隐藏

	$(document).ready(function($) {
	  // Hide Top bar on on scroll down
	  var didScroll;
	  var lastScrollTop = 0;
	  var delta = 5;
	  var topbarHeight = $('.top-bar').outerHeight();

	  $(window).scroll(function(event) {
	    didScroll = true;
	  });

	  setInterval(function() {
	    if (didScroll) {
	      hasScrolled();
	      didScroll = false;
	    }
	  }, 250);

	  function hasScrolled() {
	    var st = $(this).scrollTop();


	    if (Math.abs(lastScrollTop - st) <= delta)
	      return;



	    if (st > lastScrollTop && st > topbarHeight) {
	      // Scroll Down
	      console.log('down');
	      $('.top-bar').animate({
	        'top': '0px'
	      });
	    } else {
	      // Scroll Up

	      if (st < $(document).height()) {
	        console.log('up');
	        $('.top-bar').animate({
	          'top': '-65px'
	        });
	      }
	    }

	    lastScrollTop = st;
	  }

	});

.top-bar {
  background-color: #ccc;
  // Should be the same as padding top
  min-height: 70px;
  padding: 10px;
  padding: 1rem;
  position: fixed;
  top: -65px;
  // Add a nice transition
  transition: top 0.2s ease-in-out;
  // Center the content if you so desire
  text-align: center;
  width: 100%;
  // If your sticky bar gets hidden underneath some content set the z-index higher 
  z-index: 99;
  -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='bar-up top-bar'>This is the top bar</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>