Question

我试图在这里找到解决方案，但找不到我想要的。

这是一个与某些JavaScript代码的功能有关的简单问题。

我简化了代码，使任何人都可以读取。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
    #my-nav {
        position: sticky;
        top: 0;
        height: 150px;
        background: #000;
    }
</style>
</head>
<body>
    <nav id="my-nav"></nav>
    <script>
        navScroll();
        window.onscroll = function () { navScroll() };
        function navScroll(){
            var nav = document.getElementById('my-nav');

            if(document.body.scrollTop > 50 || document.documentElement.scrollTop > 50){
                nav.style.height= "40px";
            }
            else {
                nav.style.height="150px";
            }
        }
    </script>
</body>
</html>

现在，让我们在nav标记之后添加任何内容以测试滚动功能。向下滚动某些特定像素时，该函数应简单地调整导航栏的大小，然后返回顶部时，返回到其大小。

但是，您将看到该功能将继续切换，导航栏将继续“连续”调整大小。（尤其是在Firefox上，性能问题会更加明显，我们会发现它的运行速度很慢。）

Answer 1

此代码在您更改高度时修改页面布局。因此，scrolltop值反复更改。使用position:fixed不会折叠布局。

<nav id="my-nav"></nav>
<div id="nav-space"></div>

#nav-space {
  height: 200px;
}

#my-nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 150px;
  background: #000;
}

这是工作代码=> https://jsfiddle.net/moorthyrweb/f7py6zex/

Answer 2

您可能会遇到节流和反弹事件危机。为了更好地理解JS事件触发，这些将对您有所帮助：

https://www.sitepoint.com/throttle-scroll-events/

How to debounce or throttle scroll events in iOS devices ( Safari )

https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

Javascript简单滚动功能问题

2 个答案: