gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:47:48 25 4
gpt4 key购买 nike

问题

我有一个下拉菜单,当单击汉堡包图标时会出现该菜单。当浏览器宽度小于 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();
}
});

最佳答案

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

position: fixed;
top: 0;

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

关于javascript - 当用户向下滚动页面时,导航和下拉菜单之间的空间由于位置 : fixed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43878415/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com