Question

我正在创建一个navbar，在滚动页面时以及在页面顶部时，它们具有不同的UI外观。

问题-如果我进行了鼠标滚动，但是一切都很好，但是当我使用keyboard-down按钮时，感觉有点奇怪。我正在尝试在下面的代码段中复制我的问题，并将解释我认为是确切的问题。

我正在附加jsfiddle链接-https://jsfiddle.net/o3pLb9y2/4/

const ThrottleUpdateHeader = _.throttle(updateHeader, 300)
document.addEventListener('scroll', ThrottleUpdateHeader, false)

function updateHeader() {
	let navbar = document.querySelector('nav')
  if(window.pageYOffset > 0) {
  	navbar.classList = 'navbar--scrolling'
  } else {
  console.log(window.pageYOffset)
  	navbar.classList = 'navbar'
  }
}

.navbar {
  padding: 1.875rem 0.984rem;
  background: red;
  transition: all 0.5s;
}

.navbar--scrolling {
  padding: 0.534rem 0.984rem;
  transition: all 0.5s;
  background: blue;
  position: sticky;
  top:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.min.js"></script>
<nav class="navbar">
  Hello world
</nav>

<p>
  Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>

我不确定为什么lodash函数在stackoverflow摘录中无法正常工作，添加了CDN。

现在，当您看到小提琴时，我希望您一次按key-down按钮，您将得到怪异的行为-It changes to scrolling nav, but then moved back to initial Nav also feel like blocking if I press button not that frequently。

我知道为什么会发生这种情况-当我按下key-down时，pageYoffset的值将更改为大于0的值，这将触发我的功能。但是当新导航栏出现时，实际上它的大小随着padding的减小而减小，这又减小了pageYoffset再次触发了滚动功能，这次我的pageYoffset现在是{{1} }。

我在这里寻找解决方案。谢谢

当元素大小减小并应用过渡时，滚动条将推至顶部

0 个答案: