Fix an element when it reaches the top of the screen using javascript and css - Stack Overflow

admin管理员组

文章数量:1357646

I have an element, that I wish to stick on top after it reaches the top of the screen.

<div id="HeaderWrapper">
  ...
  <div id="Navigation">
    Navigation
  </div>
  ...
</div>

I am adding an event listener on scroll, which would call a function to check the posting of the element by using getBoundingClientRect() method. If the top or the y of the element is less then 0 relative to the viewport, then I would like to fix/stick the header. Again if its more than 0 then I would like to remove the fix position. In both the cases, I am adding and removing a class name of fixed_navbar which has the property of fix position.

document.addEventListener("scroll", function() {
  const el = document.getElementById("Navigation");
  let rect = el.getBoundingClientRect();
  if (rect.top <= 0) {
    el.classList.add("fixed_navbar");
  } else {
    el.classList.remove("fixed_navbar");
  }
});

You can also the check the codepen demo.

When the position top of the element is more than zero it works fine. Also when scrolling down to the position where the element's top position is less than 0 it sticks to the page and has the fixed propery. But again when scrolling back to the position when the element's top is more than 0, the element still has the fixed propery and stick's to the top of the screen. How can I make the element stick to the top when it reaches the top of the screen and again when the element is below the top of the screen remove the fixed postion?

I have an element, that I wish to stick on top after it reaches the top of the screen.

<div id="HeaderWrapper">
  ...
  <div id="Navigation">
    Navigation
  </div>
  ...
</div>

I am adding an event listener on scroll, which would call a function to check the posting of the element by using getBoundingClientRect() method. If the top or the y of the element is less then 0 relative to the viewport, then I would like to fix/stick the header. Again if its more than 0 then I would like to remove the fix position. In both the cases, I am adding and removing a class name of fixed_navbar which has the property of fix position.

document.addEventListener("scroll", function() {
  const el = document.getElementById("Navigation");
  let rect = el.getBoundingClientRect();
  if (rect.top <= 0) {
    el.classList.add("fixed_navbar");
  } else {
    el.classList.remove("fixed_navbar");
  }
});

You can also the check the codepen demo.

When the position top of the element is more than zero it works fine. Also when scrolling down to the position where the element's top position is less than 0 it sticks to the page and has the fixed propery. But again when scrolling back to the position when the element's top is more than 0, the element still has the fixed propery and stick's to the top of the screen. How can I make the element stick to the top when it reaches the top of the screen and again when the element is below the top of the screen remove the fixed postion?

• javascript
• css
• sticky

Share Improve this question Follow edited Oct 15, 2017 at 18:35 Kakar asked Oct 15, 2017 at 17:43 KakarKakar 5,6191111 gold badges6464 silver badges9494 bronze badges 1

• Possible duplicate of Sticky Nav flickering like flashing lights – FluffyKitten Commented Oct 15, 2017 at 17:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You can achieve this with CSS alone, by using:

position: sticky

When declaring position: sticky; you will also need to declare a top style (eg. top: 0;) to indicate at which point you want the element to bee "stuck".

Working Example:

header {
height: 600px;
}

.navigation {
position: sticky;
top: 0;
margin-top: 150px;
}

<header>
<div class="navigation">Navigation</div>
</header>

---

Further Information:

position: sticky works in the following browsers:

https://caniuse./#feat=css-sticky

Try This

 if (rect.top <= 0) {

In if condition you write rect.top < 0 that is wrong for your requirement

@Rounin provide an awesome solution. Although I fix your issue in JavaScript. you can check this

document.addEventListener("scroll", function() {
  const el = document.getElementById("Navigation");
  let rect = el.getBoundingClientRect();
  if (rect.top <= 0) {
    el.classList.add("fixed_navbar");
  } else {
   window.onscroll = function() {myFunction()};

function myFunction() {
    if ( document.body.scrollTop < 100 ) {
        el.classList.remove("fixed_navbar");
    } 
  }
  }
});

* {
  margin: 0;
  padding: 0;
}

#HeaderWrapper {
  background: lightgrey;
  height: 1500px;
}

.box {
  background: skyblue;
  width: 100%;
  height: 100px;
}

#Navigation {
  background: green;
}

.fixed_navbar {
  position: fixed;
  z-index: 1000;
  width: 100%;
  left: 0;
  top: 0;
}

<div id="HeaderWrapper">
  <div class="box"></div>
  <div id="Navigation">
    Navigation
  </div>
</div>

本文标签： Fix an element when it reaches the top of the screen using javascript and cssStack Overflow