показать выпадающее меню за пределами родительской боковой панели, и при прокрутке сделать меню также прокрутить в соответствии с его родителем,

Question

Вот код ниже, мне нужен div dropMenu после прокрутки навигационной панели, чтобы изменить ее положение (столько же, сколько навигационная прокрутка).чтобы остаться ниже элемента (i)

    <nav>
     <ul>
      <li>
       <a onclick={this.setState(prevState => {showDropMenu:!prevState.showDropMeny})}>
        <i class="fas fa-ellipsis-h" /> 
       </a>
      </li>
      {showDropMenu &&<div className="dropMenu"></div> }
     </ul>
    </nav>

nav {
    overflow-y: visible;
    overflow-x: hidden;
    max-height: 70vh;
}
ul {
    list-style-type: none;
    min-width: 15vw;
    padding-left: 0;
}

, есть ли какое-либо большое или маленькое изменение, которое я могу сделать, чтобы достичь этого?

Answer 1

Вы можете взглянуть на этот пример https://www.w3schools.com/howto/howto_js_sticky_header.asp

Ниже вы можете увидеть быстрый пример, который я сделал с вашим кодом

 class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          showDropMenu: true
        };
      }

      render() {
        return (
          <div className="App">
            <nav>
              <ul>
                <li>
                  <a
                    onClick={() =>
                      this.setState({ showDropMenu: !this.state.showDropMenu })
                    }
                  >
                    <i className="fas fa-ellipsis-h" /> Click Me
                  </a>
                </li>
                {this.state.showDropMenu && (
                  <div className="dropMenu">Drop Menu</div>
                )}
              </ul>
            </nav>
            <div className="content">
              Some Text Some Text Some Text Some Text Some Text
            </div>
          </div>
        );
      }
    }

    nav {
      background-color: blue;
      position: fixed;
      top: 0;
      width: 100%;
    }
    ul {
      list-style-type: none;
      min-width: 15vw;
      padding-left: 0;
    }

    .content {
      margin-top: 100px;
    }