问题

Question

问题

点击汉堡图标后会出现一个下拉菜单。当浏览器的宽度小于1300像素时，会出现汉堡包图标。但由于position: fixed，当用户向下滚动页面时，下拉菜单似乎不会与nav一起作为一个元素移动。结果，两个元素之间似乎存在差距，您可以看到它们之间的文本。

我的解决方法是滚动以隐藏下拉导航，如果它打开。但是，我不知道这是否是最佳方法，因为这可能会导致手机问题。我觉得更好的方法可能是以某种方式或使用position: relative

目的

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

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

scripts.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添加

#if defined(__ANDROID_TYPES_SLIM__)
// We only register the first type when we have multi-argument calls in the
// case where we're trying to reduce executable size, but it turns out that the
// int32 version of this op is needed, so explicitly include it.
REGISTER(BinaryOp, CPU, "Mul", functor::mul, int32);
#endif  // __ANDROID_TYPES_SLIM__

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

Answer 2

我不确定您是否试图阻止菜单滚动页面，或者让导航栏保持固定在顶部，但两者都可以使用position来完成。

要将导航栏附加到页面顶部，请使用position: fixed并在主要内容区域的顶部添加一些填充（足以说明导航栏的高度）。

要保持移动菜单不与页面一起滚动，请将其位置更改为相对或静态，请查看这些内容的效果。

Answer 3

如果我理解正确，无论何时在较小的屏幕上，您都需要能够滚动查看内容。导航正在上升，汉堡包的导航也是如此。

只需将班级测试从固定位置更改为绝对位置。

Answer 4

修复：

更改

    position: fixed

到

    position: absolute

<强>为什么：

两者都会使元素流出，这将具有相对于其最近定位的祖先而不是它的直接非定位容器具有大小和位置的期望效果。虽然绝对就是这样，但固定也会将元素保持在窗口上完全相同的位置，就好像它被粘贴到您的计算机屏幕上一样。这就是它被卡住的原因。

Answer 5

我将带有test类的无序列表移到nav
我删除了下拉菜单中的position: fixed

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

的style.css

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

当用户向下滚动页面时，导航和下拉菜单之间的位置由于位置：固定

问题

目的

CodePen：https://codepen.io/onlyandrewn/pen/JNpdde

的index.html

scripts.js中

5 个答案:

的index.html

的style.css