Question

我使用以下代码在向上滚动页面时显示div并在向下滚动时隐藏。它按预期工作，但我也想从页面顶部隐藏div 100px，因此它不会与我的标题重叠。我怎样才能调整这段代码（或者使用不同的代码，最好用jquery？）来做到这一点？

感谢您的帮助。

 $('.replies').click(function(e){
   e.preventDefault();
   $(this).next(".got_replies").fadeToggle();
    text =  $(this).text();

    if(text.indexOf('view') >= 0) {
       text = text.replace('view','hide');
    } else {
     text = text.replace('hide','view');
    }
     $(this).text(text);
    });

Answer 1

我建议制作一个更简洁的代码版本。这段时间并不是必需的，只是无缘无故地从浏览器中消耗资源。你可以写得这么短。

使用JQuery：

＆＃13;

var lastScrollTop = 0;
$(window).scroll(function() {
  var navbarHeight = $('#fixed-header').outerHeight();
  var scrollTop = $(this).scrollTop();
  //Scrolling Down or scrolled too far up
  if (scrollTop > lastScrollTop || scrollTop < navbarHeight) {
    $('#fixed-header').hide();
  } else {
    //Scrolling Up
    $('#fixed-header').show();
  }
  lastScrollTop = scrollTop;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 100px; background-color: red; width: 100%; position: fixed;" id="fixed-header">Lorem Ipsum</div>
<p>
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his.
</p>
<p>
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his.
</p>
<p>
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his.
</p>
<p>
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his.
</p>
<p>
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his.
</p>
<p>
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his.
</p>

＆＃13;

使用普通的旧JavaScript：

＆＃13;

var lastScrollTop = 0;

window.onscroll = function() {
  var scrollTop = document.body.scrollTop;
  var navbarHeight = document.getElementById('fixed-header').offsetHeight;

  // Scrolling down or scrolled to far up
  if (scrollTop > lastScrollTop || scrollTop < navbarHeight) {
    document.getElementById('fixed-header').style.display = 'none';
  } else {
    //Scrolling Up
    document.getElementById('fixed-header').style.display = 'block';
  }
  lastScrollTop = scrollTop;
};

＆＃13;

<div style="height: 100px; background-color: red; width: 100%; position: fixed;" id="fixed-header">Lorem Ipsum</div>
<p>
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his.
</p>
<p>
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his.
</p>
<p>
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his.
</p>
<p>
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his.
</p>
<p>
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his.
</p>
<p>
Lorem ipsum dolor sit amet, mei ut iuvaret volumus, ancillae expetenda cu sit. Eu ius tollit labores, ferri scripserit vel te. Stet bonorum quaerendum mea no, constituto sadipscing ad qui. Eu sale cotidieque vis, at velit impetus pro. Soluta legendos qui eu, ex duo tota repudiare. Ut magna omnes legendos eos, in quando laudem tacimates his.
</p>

＆＃13;

向上滚动显示div但隐藏在页面顶部附近

1 个答案: