Question

我正在尝试生成一个固定位置标题，一旦用户开始滚动页面就会出现。我正在使用JQuery（在一个也使用Angular的页面上）并且想要在scrollTop为＆gt;时淡出。 250px并立即消失（我一直在使用display：none）它的时刻＆lt; 250像素。

当我慢慢滚动时，我的代码可以正常工作，但当以高速向上和向下滚动时，应隐藏的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();
});

注意：在这种情况下，没有必要在致电.stop()之前致电.fadeIn()，因为如果没有对.fadeIn()进行干预，就不会连续两次拨打.hide()

jsfiddle

Answer 2

当您向下滚动时，您应该只有一个标题，并使用jQuery调整大小，而不是使用2个不同的标题。检查此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滚动和一些不那么隐藏的标题

2 个答案: