JQuery 滚动和一些不那么隐藏的标题

Question

我正在尝试生成一个 fixed-position header，它会在用户开始滚动页面时出现。我正在使用 JQuery（在一个也使用 Angular 的页面上）并且希望在 scrollTop > 250px 并立即消失时淡入（我一直在使用显示：none）瞬间 < 250px.

当缓慢滚动时，我的代码可以正常工作，但当快速上下滚动时，应该隐藏的 h1 会重新出现在 250px 标记上方：https://jsfiddle.net/gilestaylor/jpaqbm36/

有人可以推荐修复方法吗？或者更聪明的方法来做到这一点？（我仍在学习技巧，所以非常感谢任何提示！）

HTML
<header>
  <h1>Order some food</h1>
</header>
<div id="bar">
 <h1>Order some food</h1>
</div>

JS
$(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() > 250) {
      $('#bar').css({
        'height': '50px'
      });
    $('#bar h1').fadeIn(1000);          
    }
    else {
        $('#bar').css({
            'height': '0'
        });
        $('#bar h1').css({'display': 'none'});
    };
  });
});

Answer 1

对fadeIn()的调用需要时间。当您隐藏元素时甚至再次调用 .fadeIn() 时，它可能仍然是动画。因此，您应该在执行这些操作之前使用 .stop() 停止动画。此外，您可以使用 .hide() 来隐藏元素，而不是 .css({'display': 'none'}).

jsfiddle

要真正使代码正确，您应该只在需要时进行更改。也就是说，你应该只在不显示时执行代码来显示它，只有在显示时才执行隐藏它的代码。

$(function() {
  var isBarShown = false;

  function updateBar() {
    if ($(window).scrollTop() > 250) {
      if (!isBarShown) {
        $('#bar').css({'height': '50px'}).find('h1').fadeIn(1000);
        isBarShown = true;
      }
    } else {
      if (isBarShown) {
        isBarShown = false;
        $('#bar').css({'height': '0'}).find('h1').stop().hide();
      }
    }
  }

  $(window).scroll(function() {
    updateBar();
  });

  updateBar();
});

注意：在这种情况下，没有必要在调用 .fadeIn() 之前调用 .stop()，因为如果没有对 [=14] 的中间调用，就不会连续两次调用 .fadeIn() =].

jsfiddle

Answer 2

你应该只有一个 header 而不是有 2 个不同的 header 并在向下滚动时用 jQuery 调整它的大小。检查这个 https://jsfiddle.net/ktriek/jpaqbm36/5/

$(function() {
  $(window).scroll(function() {
  var header = $('header');
    if ($(window).scrollTop() > 250) {
          header.addClass("smaller");           
        }
        else {
              header.removeClass("smaller");    
        };
    });
});

JQuery 滚动和一些不那么隐藏的标题

JQuery Scrolling and Some Not So Hidden Headings

jquery

scroll

scrolltop