Javascript 当用户向下滚动页面时，导航和下拉菜单之间因位置而产生的间距：固定 问题

我有一个下拉菜单，当点击汉堡图标时会出现。当浏览器宽度小于1300px时，将显示汉堡包图标。但是由于

position:fixed

的原因，当用户向下滚动页面时，下拉菜单似乎不会与

nav

作为一个元素一起移动。因此，这两个元素之间似乎有一个间隙，您可以看到它们之间的文本

• 我的工作环境一直在滚动，以隐藏下拉导航（如果打开）。但是，我不知道这是否是最好的方法，因为这可能会导致手机出现问题。我觉得更好的方法可能是以某种方式改变HTML的结构，或者使用

  position:relative

客观的

• 当我向下滚动页面时，我希望导航和它的下拉菜单一起向上移动

代码笔： index.html

地图分数




学校



地图分数




Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

Lorem ipsum dolor sit amet，奉献精英。除了知识产权保护之外，其他人也不例外。《自由eligendi》中的布兰迪提斯

scripts.js

if（$（窗口）.width（）<1300）{
$（“.fa条”）。在（“单击”，函数（）{
$（“.test”）.slideToggle（）；
<nav id="top">
    <div class="nav__title">
        <a href="/schools/" class="link--title"><h1>School Guide</h1></a>
    </div>

    <div class="nav__wrapper">
        <div class="nav__list--wrapper">

            <div class="nav__hamburger">
                <i class="fa fa-bars" aria-hidden="true"></i>

                <ul class="test">
                    <a href="/schools/about" class="dropdown--list-item"><li>About</li></a>
                    <a href="/schools/all-schools"><li class="item-schools">Schools</li></a>
                    <ul class="inner-text inner-school">
                        <a href="/schools/search/?school_type=Elementary&county=none&distance=" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> Elementary</li></a>
                        <a href="/schools/search/?school_type=Middle&county=none&distance=" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> Middle</li></a>
                        <a href="/schools/search/?school_type=High&county=none&distance=" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> High</li></a>
                    </ul>

                    <a href="/schools/all-districts" class="dropdown--list-item"><li>Districts</li></a>
                    <li>MAP Scores</li>
                    <ul class="inner-text">
                        <a href="/schools/school-map-scores/" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> By school</li></a>
                        <a href="/schools/district-map-scores/" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> By district</li></a>
                    </ul>
                </ul>
            </div>

            <ul class="nav__list">
                <a href="/schools/about/" class="nav__link"><li class="nav__item item--about">About</li></a>
                <li class="nav__item item--schools">Schools
                    <i class="fa fa-angle-down" aria-hidden="true"></i>

                    <ul class="nav__dropdown dropdown--schools">
                        <div class="triangle triangle-schools"></div>
                        <a href="/results.html?filter=elementary" class="dropdown--list-item"><li>Elementary</li></a>
                        <a href="/results.html?filter=middle" class="dropdown--list-item"><li>Middle</li></a>
                        <a href="/results.html?filter=high" class="dropdown--list-item"><li>High</li></a>
                    </ul>
                </li>

                <a href="/schools/all-districts/" class="nav__link"><li class="nav__item item--districts">Districts</li></a>
                <li class="nav__item item--map">MAP Scores
                    <i class="fa fa-angle-down" aria-hidden="true"></i>

                    <ul class="nav__dropdown dropdown--districts">
                        <div class="triangle triangle-map"></div>
                        <a href="/schools/school-map-scores/"><li>By school</li></a>
                        <a href="/schools/district-map-scores/"><li>By district</li></a>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="nav__social">
            <div class="nav__icons">
                <a href="" class="link--nav link--facebook" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                <a href="" class="link--nav link--twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                <a href="" class="link--nav link--envelope" target="_blank"><i class="fa fa-envelope" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>
</nav>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo amet excepturi repudiandae sapiente consectetur itaque fugit omnis placeat et, porro reiciendis voluptas molestiae magnam minima. Blanditiis in libero eligendi?</p>

  if ($(window).width() < 1300) {
    $(".fa-bars").on("click", function(){
      $(".test").slideToggle();

      if ($(".test").hasClass("is-open")) {
        $(".test").removeClass("is-open");
      } else {
        $(".test").addClass("is-open");
      }
    });
  }

  $(window).on("resize", function(){
    if ($(".test").hasClass("is-open")) {
      $(".test").removeClass("is-open");
      $(".test").hide();
    }

    $(".fa-bars").unbind("click");
    if ($(window).width() < 1300) {
      $(".fa-bars").on("click", function(){
        $(".test").slideToggle();
      });
    }
  });

  $(window).on("scroll", function(){
    if ($(".test").hasClass("is-open")) {
      $(".test").removeClass("is-open");
      $(".test").hide();
    }
  });

position: fixed;
top: 0;

    position: fixed 

    position: absolute

<nav id="top">
    <div class="nav__title">
        <a href="/schools/" class="link--title"><h1>School Guide</h1></a>
    </div>

    <div class="nav__wrapper">
        <div class="nav__list--wrapper">

            <div class="nav__hamburger">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div>

            <ul class="nav__list">
                <a href="/schools/about/" class="nav__link"><li class="nav__item item--about">About</li></a>
                <li class="nav__item item--schools">Schools
                    <i class="fa fa-angle-down" aria-hidden="true"></i>

                    <ul class="nav__dropdown dropdown--schools">
                        <div class="triangle triangle-schools"></div>
                        <a href="/results.html?filter=elementary" class="dropdown--list-item"><li>Elementary</li></a>
                        <a href="/results.html?filter=middle" class="dropdown--list-item"><li>Middle</li></a>
                        <a href="/results.html?filter=high" class="dropdown--list-item"><li>High</li></a>
                    </ul>
                </li>

                <a href="/schools/all-districts/" class="nav__link"><li class="nav__item item--districts">Districts</li></a>
                <li class="nav__item item--map">MAP Scores
                    <i class="fa fa-angle-down" aria-hidden="true"></i>

                    <ul class="nav__dropdown dropdown--districts">
                        <div class="triangle triangle-map"></div>
                        <a href="/schools/school-map-scores/"><li>By school</li></a>
                        <a href="/schools/district-map-scores/"><li>By district</li></a>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="nav__social">
            <div class="nav__icons">
                <a href="" class="link--nav link--facebook" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                <a href="" class="link--nav link--twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                <a href="" class="link--nav link--envelope" target="_blank"><i class="fa fa-envelope" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>
</nav>

<ul class="test">
    <a href="/schools/about" class="dropdown--list-item"><li>About</li></a>
    <a href="/schools/all-schools"><li class="item-schools">Schools</li></a>
    <ul class="inner-text inner-school">
        <a href="/schools/search/?school_type=Elementary&county=none&distance=" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> Elementary</li></a>
        <a href="/schools/search/?school_type=Middle&county=none&distance=" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> Middle</li></a>
        <a href="/schools/search/?school_type=High&county=none&distance=" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> High</li></a>
    </ul>

    <a href="/schools/all-districts" class="dropdown--list-item"><li>Districts</li></a>
    <li>MAP Scores</li>
    <ul class="inner-text">
        <a href="/schools/school-map-scores/" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> By school</li></a>
        <a href="/schools/district-map-scores/" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> By district</li></a>
    </ul>
</ul>

.test {
    font-weight: 400;
    width: 100%;
    padding: 0;
    background: #c62828;
    z-index: 99;
    box-shadow: 0 5px 5px #f4c6c6;
    display: none;
    margin: 0;
}