Question 226479 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – JS can't add class to an element in React template

I have a Bootstrap template that I’m using for a React app. Inside the template, there’s this piece of JS that’s supposed to make the header sticky on scroll. It works in pure HTML, but when I move the header to a React template (which is necessary because React handles i18n), then adding a class this way no longer works. What’s the simplest workaround here?

 let selectHeader = select('#header')
  if (selectHeader) {
    let headerOffset = selectHeader.offsetTop
    let nextElement = selectHeader.nextElementSibling
    const headerFixed = () => {
      if ((headerOffset - window.scrollY) <= 0) {
        selectHeader.classList.add('fixed-top')
        nextElement.classList.add('scrolled-offset')
      } else {
        selectHeader.classList.remove('fixed-top')
        nextElement.classList.remove('scrolled-offset')
      }
    }
    window.addEventListener('load', headerFixed)
    onscroll(document, headerFixed)
  }

I’ve tried using jQuery, hasn’t worked either.

Tags:

2

Answers


  1. 0

    This jQuery code selects the header and its sibling element. It calculates the header’s position and adjusts its behavior on scroll. If the user scrolls past the header’s original position, it adds a "fixed-top" class to the header and a "scrolled-offset" class to the sibling element, creating a sticky effect. These changes are triggered on page load and as the user scrolls.

    $(document).ready(function() {
  let $selectHeader = $('#header');
  if ($selectHeader.length) {
    let headerOffset = $selectHeader.offset().top;
    let $nextElement = $selectHeader.next();

    const headerFixed = () => {
      if ((headerOffset - $(window).scrollTop()) <= 0) {
        $selectHeader.addClass('fixed-top');
        $nextElement.addClass('scrolled-offset');
      } else {
        $selectHeader.removeClass('fixed-top');
        $nextElement.removeClass('scrolled-offset');
      }
    };

    $(window).on('load', headerFixed);
    $(window).on('scroll', headerFixed);
  }
});
    Login or Signup to reply.
  2. 0

    You don’t need JavaScript to make a header sticky. You can use the position: sticky CSS rule.

    A React example.

    const { Fragment } = React;

function Example() {
  return (
    <Fragment>
      <header className="header">Header</header>
      <main className="main">Main</main>
    </Fragment>
  );

}

const node = document.getElementById('root');
const root = ReactDOM.createRoot(node);
root.render(<Example />);
    * { margin: 0; padding: 0;}
.header { position: sticky; top: 0; background-color: lightgray; height: 25px; padding: 0.25rem;}
main { height: 2000px; padding: 0.25rem;}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
<div id="root"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search