jQuery 不显示和隐藏标题

Question

我正在尝试制作一个显示在页面特定位置的标题。 所以我正在做的是检查滚动到页面顶部以及应该出现标题的元素的顶部偏移量。如果 scrollTop 大于 offset 则显示标题，否则会消失。

但是！当我滚动到该位置时，标题位置不断在top: -13% 和top: -12.999998% 之间切换。一段时间后，它终于显示了标题，但它永远不会消失。

我做错了什么？！

JSFiddle：https://jsfiddle.net/5k5s016f/

Answer 1

由于打扰，我好像最后一个参加聚会，但既然我写了它，我会在 FWIW 上发布答案。

jsFiddle Demo

您需要对代码进行去抖动处理。这是一个简单的系统，但也建议学习Ben Alman's explanation/examples。

var $m1 = $('#m1'), $m2 = $('#m2'); //TESTING ONLY
var $win = $(window), $page2 = $("#page2"), $hdr=$(".floating-header");
var $offset = $page2.offset().top;
var hvis = false, curpos;
$win.scroll(function() {
  curpos = $win.scrollTop();
		$m1.html(curpos); //TESTING ONLY
		$m2.html($offset);//TESTING ONLY

	if ( curpos > $offset ) {
		if ( !hvis ){
			hvis = true;
  			//$m1.html(curpos);
    		$hdr.finish().animate({
      		top: "0"
    		}, 700);
		}
  } else {
		if ( hvis ){
    		$hdr.finish().animate({
      		top: "-60px"
    		}, 700);
			hvis = false;
		}
  }
});

html,
body {
  height: 100vh;
  width: 100vw;
}

#page1,
#page2,
#page3 {
  height: 100%;
  width: 100%;
  background-color: #fff;
}

.floating-header {
  position: fixed;
  top: -60px;
  background-color: #000;
  width: 100%;
  height: 60px;
}
.msg{position:fixed;bottom:10px;height:30px;width:80px;text-align:center;}
.msg{padding-top:10px;}
#m1 {left:3px; border:1px solid orange;background:wheat;}
#m2 {right:3px;border:1px solid green; background:palegreen;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="floating-header">Header</header>
  <div id="page1">
    <p>Page1</p>
  </div>
  <div id="page2">
    <p>Page2</p>
  </div>
  <div id="page3">
    <p>Page3</p>
  </div>
  
<div id="m1" class="msg"></div>
<div id="m2" class="msg"></div>

Answer 2

你的逻辑全乱了。基本上，您要确保仅在绝对需要时才制作动画 - 不多也不少。而且由于滚动事件发生了数百次......随着用户滚动而不断快速触发......您要确保在每个滚动事件期间您所做的工作量尽可能少。这尤其是意味着你不想在每个滚动事件上查询 DOM，如果你不需要的话（ps。$('selector') 是一个 dom 查询）。看看这个小提琴：

https://jsfiddle.net/5k5s016f/6/

Answer 3

好吧，我认为问题在于 .animate() 函数不断运行，导致动画在其结束之前“重新启动”。

这不是最漂亮的解决方案，但只是添加一个控制函数执行的标志和一个超时以减少运行处理程序的频率就可以解决问题。

https://jsfiddle.net/5k5s016f/2/

var visible = false;
$(window).scroll(function() {
    setTimeout(function(){

    var height = $(window).scrollTop();
    var $page2 = $("#page2");
    var offset = $page2.offset().top;

    if (height > offset) {
      if    (visible) {
        return;
      }
      visible = true;
      $(".floating-header").show().animate({
        top: 0
      });
    } else {
        if (!visible) {
        return;
      }
      visible = false;
      $(".floating-header").animate({
        top: "-13%"
      });
    }

  }, 200)
});

Answer 4

您看到的问题是因为每次调用 scroll 事件时，动画都会排队。如果您等待足够长的时间，您可以看到将 top 设置为 0 的动画确实有效。

您可以使用stop() 函数停止所有动画，然后再尝试运行另一个动画。

类似的东西

if (height > offset) {
   $(".floating-header").stop().show().animate({
     top: "0"
   }, 700);
} else {
   $(".floating-header").stop().animate({
     top: "-13%"
   }, 700);
}

我可以建议的几个改进是

• 消除滚动事件处理程序

• 在排队动画之前检查标题的当前状态。即如果它已经隐藏，则不要尝试隐藏它，反之亦然