Question

使用jQuery，我试图制作类似于this Wordpress plugin的导航栏：当页面加载时，导航栏隐藏/关闭，当达到某个滚动位置时向下滑动到固定位置，然后向后滑动当用户向上滚动到顶部时，直至其屏幕外位置。

我设法做到了，然而，时间是完全错误的：滚动后可能需要几秒钟，直到出现菜单栏。向上滚动时情况更糟：起初我认为它根本不起作用，但有时候，经过15秒甚至更长时间后，它最终会向上移动。

这是我的代码：

＆＃13;

$(window).scroll(function() {
  var scrollposition = $(window).scrollTop();
  if (scrollposition > 100) {
    $("#main_navigation").animate({
      top: "0px"
    }, 600);
  };
  if (scrollposition < 100) {
    $("#main_navigation").animate({
      top: "-82px"
    }, 400);
  };
});

＆＃13;

html,
body {
  margin: 0;
  height: 100%;
}
.content {
  height: 200%;
  background: #fda;
  padding: 5em 3em;
}

nav#main_navigation {
  position: fixed;
  z-index: 1;
  top: -82px;
  width: 100%;
  background: #fff;
  height: 54px;
  border-bottom: 1px solid #eee;
}

.logo {
  display: inline-block;
  position: relative;
  top: 50%;
  left: 2em;
  margin: 0;
  width: 36px;
  transform: translateY(-50%);
}

nav#main_navigation ul {
  position: relative;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  display: inline-block;
  list-style: none;
  float: right;
  margin-right: 0.8em;
}

nav#main_navigation li {
  display: inline-block;
  margin-right: 1.2em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="main_navigation">
  <div class="logo">(logo)</div>
  <ul>
    <li><a href="#">Welcome</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<div class="content">
  <p>This is the content. Scroll down at least 100px to make the navbar appear. This should take 0.6 seconds, but takes much longer.</p>
  <p>Then scroll back up to make the navbar disappear again. This should only take 0.4 seconds...</p>
</div>

＆＃13;

我想这可能与必须处理的滚动事件太多有关，但我不知道如何避免或过滤它。或者还有其他原因吗？

Answer 1

我明白了：滚动事件有很多，并且每个滚动事件都会触发一个动画，这显然对于浏览器来说太过分了。它需要很长时间，直到所有这些都被处理并最终执行动画，导致长时间延迟。

所以我找到了一种方法，只能在触发另一个动画之前触发一次触发向下和向上滑动动画。我使用了一个变量（status_1），其默认值为“已关闭”。当滚动值超过100时，仅当status_1“关闭”时才会触发第一个（向下滑动）动画。但是一旦触发，status_1被设置为“打开”，因此只要滚动值大于100，就不会再次触发它。与第二个if条件和动画相同：

var status_1 = "closed"; $(window).scroll(function() { var scrollposition = $(this).scrollTop(); if ((scrollposition > 100) && (status_1 == "closed")) { $('#main_navigation').animate({ top: '0px' }, 600); status_1 = "open"; }; if ((scrollposition < 100) && (status_1 == "open")) { $('#main_navigation').animate({ top: '-82px' }, 400); status_1 = "closed"; }; });

html, body { margin: 0; height: 100%; } .content { height: 200%; background: #fda; padding: 5em 3em; } nav#main_navigation { position: fixed; z-index: 1; top: -82px; width: 100%; background: #fff; height: 54px; border-bottom: 1px solid #eee; } .logo { display: inline-block; position: relative; top: 50%; left: 2em; margin: 0; width: 36px; transform: translateY(-50%); } nav#main_navigation ul { position: relative; top: 50%; margin: 0; transform: translateY(-50%); display: inline-block; list-style: none; float: right; margin-right: 0.8em; } nav#main_navigation li { display: inline-block; margin-right: 1.2em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="main_navigation"> <div class="logo">(logo)</div> <ul> <li><a href="#">Welcome</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="content"> <p>This is the content. Scroll down at least 100px to make the navbar appear. This should take 0.6 seconds.</p> <p>Then scroll back up to make the navbar disappear again. This should only take 0.4 seconds...</p> </div>

滚动触发动画极度延迟

1 个答案: