JS 无法向 React 模板中的元素添加类

Question

我有一个用于 React 应用程序的 Bootstrap 模板。在模板内部，有一段 JS 应该使标题在滚动时粘住。它在纯 HTML 中工作，但是当我将标头移动到 React 模板时（这是必要的，因为 React 处理 i18n），然后以这种方式添加类不再有效。这里最简单的解决方法是什么？

 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)
  }

我尝试过使用 jQuery，也没有成功。

Answer 1

此 jQuery 代码选择标题及其同级元素。它计算标题的位置并调整其滚动行为。如果用户滚动超过标题的原始位置，它会向标题添加“固定顶部”类，并向同级元素添加“滚动偏移”类，从而创建粘性效果。这些更改在页面加载和用户滚动时触发。

$(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);
  }
});

Answer 2

您不需要 JavaScript 来使标头粘性。您可以使用

position: sticky

CSS 规则。

React 示例。

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>