javascript - 当用户向下滚动页面时，导航和下拉菜单之间的空间由于位置 : fixed

Question

问题

我有一个下拉菜单，当单击汉堡包图标时会出现该菜单。当浏览器宽度小于 1300 像素时，汉堡包图标就会出现。但是由于 position: fixed，当用户向下滚动页面时，下拉菜单似乎不会与 nav 作为一个元素一起移动。因此，这两个元素之间似乎存在间隙，您会看到它们之间的文本。

• 我的解决方法是滚动以隐藏打开的下拉导航。但是，我不知道这是否是最好的方法，因为这可能会导致移动设备出现问题。我觉得更好的方法可能是以某种方式或使用 position: relative
改变 HTML 的结构

目标

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

代码笔:https://codepen.io/onlyandrewn/pen/JNpdde

index.html

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

脚本.js

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

Answer 1

抱歉，我可能遗漏了一些东西，但基于 codepen 添加

position: fixed;
top: 0;

to nav 就是您所需要的。因此，在媒体查询中添加它也应该可以解决您的需求