如何定位可滚动 div 中的特定元素滚动位置？

Question

我在 React 站点中有一个基本的 wiki 样式页面。当滚动位置向下移动 100px 时，我想将左侧导航固定到位。我不确定这里最好的方法并且有点挣扎。

到目前为止，请参阅我的代码 - 基本上页面本身 - 由于设计 - 不滚动 - div 和 class bodyText 应用了 scroll-y 和 overflow

kb_nav ${this.state.activeClass}}> 是我尝试应用相关修复的地方 class 在特定的滚动高度。

我认为我出错的地方是我需要定位滚动容器或滚动容器内的 kb_nav div 的滚动位置 - 目前不确定如何实现不过 - 任何建议都会很棒 - 谢谢。

class Knowledge extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeClass:'',
    }
  }

  componentDidMount(){

      e.target.scrollTop.addEventListener('scroll', () => {

         let curClass = 'scroll';
         if(window.scrollY >= 100){
             curClass = 'fix_me';
         }
         this.setState({ activeClass: curClass});
         console.warn(curClass);
      });
  }

render() {
  return(

      <div className="App">


        {/* ===== CONTAINER'S ===== */}
        <div className="left_container_full"></div>


        <div className="strips">
          <div className="left_strip"></div>
          <div className="right_strip"></div>
        </div>


        <Header homepage={false} />

     

        <div className="bodyText fh kbase" id="baseRoot">
          <h2 className="first">Knowledge Base</h2>
          <p>
            <span>ArmourApp's Knowledge Base</span> is a series of support guide
            to help with any common issues. use the nav on the left to jump to a
            relevant section.

          </p>
          <div className="kb_wrapper">
            **<div className={`kb_nav ${this.state.activeClass}`}>**
              <h5>
                Sections: <span>(Click to jump)</span>
              </h5>
              <ul className="spanGroup">
                <li className="spanItem">
                  <a href="connectivity"   className="jumpTo">Connectivity</a>
                </li>
                <li className="spanItem">
                  <a href="" id="appaccess" className="jumpTo">App Access</a>
                </li>
                <li className="spanItem">
                  <a href="" className="jumpTo">App Crashing</a>
                </li>
              </ul>
             
       
            </div>
            <div className="kb_area">

              <div className="kb_area_wrap">
              <h5 id="connectivity">Connectivity:</h5>
              <button className="collapsible">Open Collapsible</button>
              <div className="collapsible-content">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
              </div>
              <button className="collapsible">Open Collapsible</button>
              <div className="collapsible-content">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
              </div>
                </div>
                <div className="kb_area_wrap">
                <h5 id="connectivit">Connectivity:</h5>
                <button className="collapsible">Open Collapsible</button>
                <div className="collapsible-content">
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </p>
                </div>
                <button className="collapsible">Open Collapsible</button>
                <div className="collapsible-content">
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </p>
                </div>
                  </div>
                  <div className="kb_area_wrap">
                  <h5 id="connectivity">Connectivity:</h5>
                  <button className="collapsible">Open Collapsible</button>
                  <div className="collapsible-content">
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                      ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                  </div>
                  <button className="collapsible">Open Collapsible</button>
                  <div className="collapsible-content">
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                      ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                  </div>
                    </div>
                  <div className="kb_area_wrap">
                <button className="collapsible">Open Section 1</button>
                <div className="collapsible-content">
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </p>
                </div>
              </div>
            </div>
          </div>

        
        </div>

     
      </div>
  
  
  )
  };
}

Answer 1

您可以使用左侧导航栏上的 position: sticky; CSS 解决此问题