以正确方式到达窗口边缘的事件（滚动）

发布于 2025-01-20 17:37:50 字数 1574 浏览 3 评论 0原文

以防万一，这是我的第一个问题。

我有：具有透明背景的导航菜单，并在到达窗口顶部边缘时尝试更改背景。

window.addEventListener("scroll", navSticky);
function navSticky(){
  let nav = document.getElementById('navbar');
  let bounding = nav.getBoundingClientRect();

  if(bounding.top <= 0 ){
      nav.classList.add("sticky");
  }else{
      nav.classList.remove("sticky");
  }
}

*{
  margin: 0;
  text-align: center;
}

body{
  background: lightgrey;
}

header h1{
  padding: 40px;
}

nav{
  position: sticky;
  top: 0;
  padding: 12px;
  background: linear-gradient(to right, 
  rgba(0,0,0,0),
  rgba(0,255,0, 0.5), 
  rgba(255,0,0, 0.5),
  rgba(0,0,0,0));
  color: black;
}

nav:before{
  content: "now bg transparent";
}

.container{
  min-height: 1000px;
  padding: 20px;
}

nav.sticky{
  background: linear-gradient(to right, 
  rgb(0,255,0), 
  rgb(255,0,0));
  color: white;
}

nav.sticky:before{
  content: "now bg isn't transparent";
}

<body>
  <header>
    <h1>Header, that ask u to scroll page</h1> 
  </header>
  <nav id="navbar">
  </nav>
  <div class ="container">
      When we scroll page, and nav reached top of screen, .sticky add to classList<br>
  </div>
</body>

它的工作原理，但我有几个问题：

没有 js 是否可以做同样的事情？
是否可以优化此脚本，因为滚动事件调用如此频繁。

谢谢！

原文

Just in case, its my 1th question.

I have:
nav menu with transparent background and trying to change backrgound when reached top edge of window.

window.addEventListener("scroll", navSticky);
function navSticky(){
  let nav = document.getElementById('navbar');
  let bounding = nav.getBoundingClientRect();

  if(bounding.top <= 0 ){
      nav.classList.add("sticky");
  }else{
      nav.classList.remove("sticky");
  }
}

*{
  margin: 0;
  text-align: center;
}

body{
  background: lightgrey;
}

header h1{
  padding: 40px;
}

nav{
  position: sticky;
  top: 0;
  padding: 12px;
  background: linear-gradient(to right, 
  rgba(0,0,0,0),
  rgba(0,255,0, 0.5), 
  rgba(255,0,0, 0.5),
  rgba(0,0,0,0));
  color: black;
}

nav:before{
  content: "now bg transparent";
}

.container{
  min-height: 1000px;
  padding: 20px;
}

nav.sticky{
  background: linear-gradient(to right, 
  rgb(0,255,0), 
  rgb(255,0,0));
  color: white;
}

nav.sticky:before{
  content: "now bg isn't transparent";
}

<body>
  <header>
    <h1>Header, that ask u to scroll page</h1> 
  </header>
  <nav id="navbar">
  </nav>
  <div class ="container">
      When we scroll page, and nav reached top of screen, .sticky add to classList<br>
  </div>
</body>

Its work, but I have several questions:

is it possible to do same without js?
is it possible to optimise this script cuz scroll event calling so often..

Thank you!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℡Ms空城旧梦 2025-01-27 17:37:50

不幸的是没有。
是的，IntersectionObserver API 是一个非常好的高性能解决方案对于这个具体问题。

该 API 允许您在元素进入或离开视口时观察元素。它在主线程之外执行此操作，因此您不会获得任何渲染阻塞代码。

在您的具体情况下，请观察

元素。每当元素离开视图时，导航栏就会变得粘性。在回调中检查 isIntersecting 属性是 true 还是 false。此属性指示观察到的元素是否（部分）在视图中。

const header = document.querySelector('#header');
const nav = document.querySelector('#navbar');

const callback = ([entry]) => {
  const { isIntersecting } = entry;
  nav.classList.toggle('sticky', !isIntersecting);
};

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0
};

const observer = new IntersectionObserver(callback, options);
observer.observe(header);

* {
  margin: 0;
  text-align: center;
}

body {
  background: lightgrey;
}

header h1 {
  padding: 40px;
}

nav {
  position: sticky;
  top: 0;
  padding: 12px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 255, 0, 0.5), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
  color: black;
}

nav:before {
  content: "now bg transparent";
}

.container {
  min-height: 1000px;
  padding: 20px;
}

nav.sticky {
  background: linear-gradient(to right, rgb(0, 255, 0), rgb(255, 0, 0));
  color: white;
}

nav.sticky:before {
  content: "now bg isn't transparent";
}

<body>
  <header id="header">
    <h1>Header, that ask u to scroll page</h1>
  </header>
  
  <nav id="navbar"></nav>
  
  <div class="container">
    When we scroll page, and nav reached top of screen, .sticky add to classList<br>
  </div>
</body>

Unfortunately no.
Yes, the IntersectionObserver API is a very good and performant solution for this specific issue.

The API allows you to observe elements when they enter or leave the viewport. It does this away from the main thread, so you won't get any render blocking code.

In your specific case, observe the <header> element. Whenever the element leaves the view is the same point when the navbar becomes sticky. In the callback check if the isIntersecting property is true or false. This property indicates if the observed element is (partially) in view or not.

const header = document.querySelector('#header');
const nav = document.querySelector('#navbar');

const callback = ([entry]) => {
  const { isIntersecting } = entry;
  nav.classList.toggle('sticky', !isIntersecting);
};

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0
};

const observer = new IntersectionObserver(callback, options);
observer.observe(header);

* {
  margin: 0;
  text-align: center;
}

body {
  background: lightgrey;
}

header h1 {
  padding: 40px;
}

nav {
  position: sticky;
  top: 0;
  padding: 12px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 255, 0, 0.5), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
  color: black;
}

nav:before {
  content: "now bg transparent";
}

.container {
  min-height: 1000px;
  padding: 20px;
}

nav.sticky {
  background: linear-gradient(to right, rgb(0, 255, 0), rgb(255, 0, 0));
  color: white;
}

nav.sticky:before {
  content: "now bg isn't transparent";
}

<body>
  <header id="header">
    <h1>Header, that ask u to scroll page</h1>
  </header>
  
  <nav id="navbar"></nav>
  
  <div class="container">
    When we scroll page, and nav reached top of screen, .sticky add to classList<br>
  </div>
</body>

回复收藏 0 原文

~没有更多了~