- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
刚刚学习了 flexbox,并决定用它制作一个导航栏。最终制作了一个非常漂亮的导航栏。
只有当我将它切换到 position: fixed
时,它才会缩小到一半大小并改变位置。我修复了所有这些,但是在我给页面一个最小宽度之前。向右滚动时,我注意到导航栏没有随页面向右滚动,并且某些内容不在页面上。
我用 jQuery 解决了这个问题,但是导航栏滚动不流畅,并且在我上下滚动时闪烁。下面的代码是我迄今为止对这个问题的解决方案。
我现在可以在固定位置模式下使用导航栏顺畅地上下滚动。当我达到页面的最小宽度时,我也可以在顶部的导航栏左右滚动。但现在我有另一个问题。当我到达页面的最小宽度并向右滚动,然后向下滚动时,导航栏进入位置:固定模式,因此跳转到顶部的错误位置。当我再次使用水平滚动条时,它会在切换到 position: absolute
后跳回到正确的位置。有什么方法可以解决这个问题,这样当我向右滚动时它就不会错位吗?
我目前的 jquery 代码如下:
$(window).scroll(function() {
var documentScrollLeft = $(document).scrollLeft();
var documentScrollTop = $(document).scrollTop();
if (lastScrollLeft != documentScrollLeft) {
$("nav").css("position","absolute").css("top",$(this).scrollTop() + "px");
}
else if (lastScrollTop != documentScrollTop)
{
$("nav").css("position", "fixed").css("top","0").css("left","0").css("width","100%");
lastScrollTop = documentScrollTop;
}
});
如果您想观察行为,我正在处理的有关导航栏的页面位于以下链接中。
https://www.cliquenext.com/sandbox.php
如果您需要任何其他代码片段,请告诉我。
最佳答案
我认为您甚至不需要 JavaScript 或 jQuery 来实现您想要的。为灵活导航设置 100% 的宽度和高度非常重要。
为了演示这一点,我创建了一个使用 flex 制作的简单导航和一个包含其下方内容的绝对 div。
在实际示例中,我用大量文本填充了 div #content
,这样您就可以看到在必须向下或向右滚动时导航的行为。
HTML
<nav>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
</nav>
<div id="content"></div>
CSS
html, body{
height: 100%;
}
body{
margin: 0;
}
nav {
position: fixed;
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
height: 100px;
background: #eee;
}
a{
text-decoration: none;
color: #000;
}
#content{
position: absolute;
top: 100px;
width: 100%;
height: calc(100% - 100px);
overflow: auto;
background: rgba(0,0,0,0.2);
}
html,
body {
height: 100%;
}
body {
margin: 0;
}
nav {
position: fixed;
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
height: 100px;
background: #eee;
}
a {
text-decoration: none;
color: #000;
}
#content {
position: absolute;
top: 100px;
width: 2000px;
height: calc(100% - 100px);
overflow: auto;
background: rgba(0, 0, 0, 0.2);
}
<nav>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
</nav>
<div id="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa distinctio molestias blanditiis! In quasi necessitatibus voluptatem. Quia laudantium consequatur repellendus hic, nulla sequi at adipisci error, obcaecati vero voluptas debitis.</div>
<div>Placeat est voluptas necessitatibus, deserunt impedit ex. Nesciunt voluptatum provident veritatis quisquam ex est id modi suscipit, dignissimos unde culpa fugiat saepe officiis, assumenda sint doloremque accusantium cumque deleniti mollitia!</div>
<div>Voluptate ratione nostrum debitis, deleniti sequi quaerat, doloribus expedita incidunt assumenda excepturi ullam, quae! Facere cum, placeat culpa aspernatur nesciunt odit ipsam, deleniti quibusdam molestiae dignissimos animi accusantium, labore hic.</div>
<div>Quidem ipsum ex vel temporibus delectus autem culpa, deleniti sed iusto omnis minus eum ipsa earum distinctio officia id, exercitationem quasi qui error optio commodi ad at aut! Veritatis, eum.</div>
<div>Corporis incidunt, harum! Minus nihil, itaque quae odit, ipsum recusandae ex adipisci, hic natus ratione unde. Magnam quibusdam quos facere, temporibus voluptatem vel, aut, quia maxime nulla sunt at similique.</div>
<div>Ducimus, fugiat! Magnam nostrum pariatur molestiae quisquam nulla quae odio laborum qui architecto, ex nemo reprehenderit, voluptatibus cupiditate dolorem quam veniam officia earum. Quidem repellat fugit, delectus. Culpa, neque, voluptatem.</div>
<div>Qui tenetur iure eaque assumenda dicta, ea quibusdam consequuntur. Quasi culpa aliquam sint quas voluptatibus molestiae consequatur voluptates modi, non, rem facilis, vitae pariatur doloribus laboriosam dolore suscipit cum voluptas.</div>
<div>Minus ratione esse voluptatibus omnis saepe enim ullam unde dolorem non voluptatum. Quas dolores, quasi eos, repudiandae mollitia laborum, maxime iste fugit molestiae consectetur expedita excepturi fugiat nihil similique sequi!</div>
<div>Ea, aliquam, placeat. Nostrum nam quasi maxime eveniet est, nemo explicabo voluptate ratione dolores nobis, voluptatibus expedita eum iste necessitatibus. Veniam quibusdam, autem, a enim voluptatibus ut perferendis necessitatibus sequi.</div>
<div>Obcaecati praesentium, sit nemo, minima reiciendis atque hic officia, aut necessitatibus commodi perspiciatis deleniti rerum nihil quos velit impedit facilis totam debitis distinctio? Maiores soluta, explicabo, officia non earum id.</div>
<div>Accusamus officia, quas iusto quis hic corrupti repellat porro vero voluptate numquam facilis culpa earum deserunt cum obcaecati, molestias! Excepturi, natus, deleniti? Totam, omnis odit repudiandae magni culpa dolor, similique.</div>
<div>Deserunt animi illo nulla eligendi, corporis dignissimos odio, eum deleniti numquam a. Vel ratione ducimus veniam dicta, doloremque velit praesentium ipsam mollitia delectus quibusdam natus necessitatibus, unde illo, quam quisquam!</div>
<div>Architecto veritatis esse earum fugiat id. Distinctio necessitatibus debitis aspernatur architecto, totam aperiam facilis minima, beatae nisi, earum quia sint nostrum! Quidem, recusandae, est. Excepturi vitae quaerat a perspiciatis iusto.</div>
<div>Vero officiis qui nesciunt, culpa quaerat eius sed itaque fugit doloremque, quam at consequatur ratione suscipit quisquam accusamus. Obcaecati iure quam atque accusantium reiciendis laboriosam eaque sequi magni pariatur aperiam!</div>
<div>Architecto aliquid ratione cupiditate maiores repudiandae ipsum deleniti fugiat ex consequatur ullam libero voluptatum, aperiam a, itaque labore corporis asperiores incidunt soluta. Perferendis, porro unde blanditiis veritatis mollitia labore eos?</div>
<div>Tenetur, voluptatibus magni voluptates illum vel quam, consequuntur delectus et dolorum, libero eum sapiente nihil inventore! Quisquam cum ad, eos iure esse, laboriosam! Exercitationem ut deserunt veniam quod, et labore?</div>
<div>Corrupti esse dolores fugit voluptas repellat veniam accusantium deleniti exercitationem autem, aperiam quasi inventore ducimus commodi error facilis velit blanditiis totam voluptate! Quae obcaecati voluptates asperiores expedita, alias cumque commodi.</div>
<div>Molestiae pariatur, voluptatum at recusandae cumque fugit voluptates vel, enim a corporis, obcaecati accusantium porro quasi molestias possimus praesentium quia maxime quas repellat. Amet ad odio, voluptates eius asperiores harum.</div>
<div>Nulla similique, fuga cumque consequatur sunt a, perspiciatis facere iusto! Officiis suscipit id praesentium commodi culpa, amet sequi quod molestias cupiditate, cum voluptate obcaecati. Porro magnam atque, vel odit at!</div>
<div>Magni consequuntur accusamus alias voluptates nostrum, cumque voluptas molestias, quaerat libero. Tenetur incidunt animi, at sapiente dolore id ratione modi a pariatur, iure, delectus. Quod maxime nobis sequi distinctio obcaecati!</div>
<div>Voluptatum aperiam, qui quidem ullam facere voluptate. Tenetur ipsa adipisci laborum molestiae error quam velit odio, voluptatem, inventore ullam sequi, magnam laudantium minima. Sed, adipisci, sunt. Cupiditate expedita, dolorem voluptatibus.</div>
<div>Delectus, facere voluptatum officiis ipsa repellendus modi ut officia at iusto dignissimos, quae veritatis sequi reprehenderit ea fugit possimus, doloremque, commodi! Aliquam tempore consectetur illum quod reprehenderit sunt dicta accusamus.</div>
<div>Quos totam esse dolorum dolore, temporibus, mollitia quisquam neque non amet natus ducimus laudantium nemo. Repudiandae accusamus quia quasi, ullam, voluptatum ea necessitatibus fugit, optio quisquam enim animi consequatur nisi.</div>
<div>Suscipit minima numquam iste voluptate cumque, est doloribus consequatur officiis, iusto ratione, fuga beatae hic perspiciatis aspernatur odit sed velit dolores fugiat rem ab? Eum excepturi illum laudantium necessitatibus laborum!</div>
<div>Iste molestias illum rem natus voluptatum amet, adipisci, animi, dolore repellendus eligendi perferendis est mollitia. Sunt ipsam quam vel facere, fuga consectetur, maxime esse corrupti aut id dolorum aperiam sequi.</div>
<div>Repellendus atque quam minima corporis itaque omnis dolorem vero, pariatur natus ullam tenetur vitae hic commodi saepe nisi praesentium, laudantium totam! Qui vero, doloremque! Quia ipsum, ducimus sit voluptate architecto!</div>
<div>Labore reiciendis aperiam culpa eius vel facilis, adipisci nisi assumenda at reprehenderit recusandae ut rem ipsa libero, molestias doloremque, illo earum iusto aut dolorum a officiis perspiciatis. Minus, eaque cupiditate!</div>
<div>Praesentium, harum, id. Illo cum dolorum ut quibusdam aperiam, hic! Culpa et dicta, nesciunt quia aspernatur similique consequuntur veritatis, numquam a ipsam tempora doloribus hic dolorem consequatur animi, nam commodi!</div>
<div>Odio harum aspernatur reiciendis, earum mollitia facere enim commodi quis hic numquam dolorem explicabo perspiciatis nesciunt voluptates, veniam debitis at perferendis! Earum quae explicabo pariatur fuga! Eos obcaecati, ipsa sunt.</div>
<div>Commodi placeat, neque reprehenderit ratione vero, excepturi iure nisi eveniet quo! Soluta mollitia iusto nobis cupiditate, quasi temporibus doloribus, quos perspiciatis unde! Dicta ratione consequatur odio velit reiciendis facilis voluptate.</div>
<div>Iusto aliquid ad consequuntur excepturi rem labore maiores, accusantium beatae impedit officiis quis. Omnis dolorum, similique vel quam reiciendis delectus, ratione. Eaque autem iusto ut necessitatibus pariatur eveniet ad quis.</div>
<div>Deserunt nihil maiores dolorum, accusamus eius cumque enim odit itaque id aliquam cupiditate quibusdam obcaecati iusto, ullam totam architecto doloribus libero commodi consequuntur, expedita non eaque. Dicta quod at, beatae.</div>
<div>Ab quas commodi quae voluptates non similique, ut corporis porro dignissimos, aperiam nihil dolore laboriosam dolorem adipisci, quasi eos quis quam odio sapiente reiciendis labore enim. Nostrum asperiores, ut ab.</div>
<div>Culpa numquam dolor rem vero ea excepturi dolorum quas consectetur atque aperiam, repellendus amet consequatur incidunt quasi, mollitia similique modi nisi illo aliquam, quam. Quae inventore asperiores ad consequuntur hic.</div>
<div>Sapiente, facere, repudiandae. Aliquid quo delectus, sunt, adipisci quaerat recusandae consectetur hic quasi placeat quisquam assumenda, doloremque cumque explicabo in expedita officia voluptas id! Ullam modi eius, deleniti ab. Ad!</div>
<div>Dignissimos, error, odio. Velit, cumque, adipisci? Mollitia ipsum deleniti labore atque ex voluptatibus omnis similique illum pariatur rerum natus at doloribus iure, reiciendis. Accusantium dicta placeat asperiores ad laborum blanditiis!</div>
<div>Minima voluptatem eveniet temporibus assumenda? Dicta nobis repellendus dolor minima nulla, hic at, nisi quis maxime sit ea iste eligendi totam, repellat odio dolorum accusantium. Maxime, necessitatibus. Ut, deserunt blanditiis.</div>
<div>Aut nihil quisquam, odit quam, harum, totam cum rerum iure nobis, nisi ducimus repudiandae debitis veritatis ratione tempora qui cupiditate autem minima aliquid temporibus atque. Doloribus officia natus voluptatem tempore!</div>
<div>Cumque omnis, dolorum quaerat quae ducimus, itaque est minima similique ab id labore dolorem quisquam delectus quas facilis amet asperiores saepe adipisci, tenetur tempore quod eum! Praesentium quasi commodi ex.</div>
<div>Saepe ipsum cum ea cupiditate ipsa, porro ullam minus, ex itaque tempora delectus perferendis animi et quidem voluptatibus eaque distinctio. Nostrum architecto officiis eaque incidunt expedita consectetur obcaecati iusto quidem.</div>
<div>Distinctio pariatur ipsum laudantium eligendi quo blanditiis, suscipit facere ut reiciendis optio quos, eum placeat nobis delectus rem nam minima officia porro totam inventore dolor quis neque, vel. Natus, magni.</div>
<div>Rem et enim animi laboriosam eos nihil ad consectetur. Nostrum nesciunt quibusdam ab distinctio consequatur totam fugit voluptatem doloribus modi adipisci quod facere impedit, ad quidem, in, dicta animi nam.</div>
<div>Accusantium accusamus quos commodi quidem, similique ipsam vitae, quis vel excepturi voluptates nostrum reprehenderit ipsum error doloremque ea dolores totam eius optio voluptatum blanditiis repellendus corporis. Excepturi facilis voluptates quod.</div>
<div>Alias eum ab ipsa dolorem, debitis? Ab iste id, perspiciatis incidunt cumque accusamus. Est temporibus voluptas, sint dolores dolor mollitia distinctio ad hic quasi, ullam, quisquam veniam non! Iusto, dolores!</div>
<div>Non saepe dicta optio, voluptates vitae ut nesciunt voluptatibus magnam natus est blanditiis, facere velit quibusdam! Iste qui quo, non laborum rem dolores explicabo recusandae doloribus consectetur natus, aperiam in.</div>
<div>Reiciendis facere voluptatem, nisi labore, excepturi sint, ea quibusdam quis unde enim sed veritatis! Id dolorum sit molestiae recusandae, sint et vel fugiat nesciunt nisi, fuga assumenda quos dolore facere.</div>
<div>Cumque dolor cupiditate sunt quasi assumenda corrupti non repudiandae dolores, aliquid ut pariatur facere! Recusandae facere nobis laboriosam commodi vitae maiores, quidem, ipsa animi, quibusdam tenetur, perferendis totam eligendi sed.</div>
<div>Et consectetur dolor esse voluptatibus quis natus itaque optio, velit dignissimos omnis reiciendis at, excepturi error enim odio, illo similique. Iure provident, debitis eveniet molestias, voluptate perspiciatis. Facilis, laborum, nisi.</div>
<div>Blanditiis doloribus voluptas veniam non enim esse, deleniti nemo facere, itaque assumenda culpa accusantium, natus ipsum sint. Quod magni fugiat eum tempora, iusto aliquam facilis dolorum corporis pariatur laudantium sed!</div>
<div>Harum fugit sapiente obcaecati nobis eius omnis nam maiores totam reiciendis, nemo? Eligendi iste, laborum. Non alias tempora in aliquid beatae repudiandae modi dolor est architecto. Nisi voluptate praesentium, atque!</div>
<div>Omnis maxime debitis ad ducimus mollitia, at? Totam error illum id distinctio quidem maiores quae inventore blanditiis neque provident quam, repellat ipsa sequi optio enim magni eum omnis eius reprehenderit.</div>
<div>Nostrum, eos porro nam mollitia ex ut voluptatum a illo! Harum odit autem fuga nihil vero praesentium natus facere libero fugiat in aut omnis laboriosam atque repellendus quod, amet minima!</div>
<div>Sit itaque officiis quaerat quod, odio deleniti. Tempora laudantium, aliquam accusantium exercitationem ullam sequi, illo earum suscipit, inventore magni numquam quod iusto quae reiciendis nihil neque hic nisi quas obcaecati?</div>
<div>Molestiae, ad quidem adipisci accusantium optio a labore vero alias. Fuga error iusto nesciunt architecto assumenda illum hic esse, optio, velit praesentium libero necessitatibus, quasi explicabo et similique facilis enim.</div>
<div>Architecto quisquam hic est! Fugit delectus amet quod sint ipsa neque, blanditiis sit itaque dolor nobis soluta iusto saepe nostrum, dolorem optio deleniti illo temporibus distinctio culpa dolores ut nisi.</div>
<div>Delectus veniam pariatur quis illo facilis eum odio temporibus numquam repudiandae, aut! Ipsam iusto asperiores ut blanditiis at provident dolor, fuga neque recusandae quis voluptatum sapiente itaque optio consequuntur dicta?</div>
<div>Quaerat temporibus optio earum. Consectetur facilis repellat quod nulla perferendis unde laboriosam, modi ipsa a voluptas eveniet nam laudantium! Atque similique error ducimus reprehenderit, nostrum explicabo aliquam numquam maiores, necessitatibus.</div>
<div>Quisquam, voluptates modi adipisci recusandae nostrum et iste ut voluptas veniam rerum. Possimus laborum atque, delectus ipsa vel voluptas architecto fugit iusto labore, hic officia aliquid iste magnam, totam deserunt.</div>
<div>Omnis amet, autem, laborum dolorem itaque pariatur asperiores obcaecati at, alias numquam nobis, beatae velit sapiente error molestiae. Fuga error saepe quae, tempore sunt praesentium ducimus quam at provident atque!</div>
<div>Optio iure sint accusamus amet repudiandae, quaerat in quo eius dolores quis numquam culpa possimus, repellat at debitis, facere, expedita rerum officiis soluta vero dolorum. Eos facilis, eius quos molestiae!</div>
</div>
关于javascript - 如何修复 flexbox 位置 :fixed navbar JS/CSS bug,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40634202/
我仍在学习网页设计的诀窍,并且我无法理解一些事情是如何工作的...... 我创建了一个函数来切换导航栏标题背景颜色,我发现以下内容是正确的,但不确定原因: 作品: $(".navbar.navbar-
在 Twitter bootstrap 2.3.2 中,我可以有类似的东西: http://jsfiddle.net/aQwUZ/3/
我是 bootstrap、jquery 和 javascript 的新手,我在一个网站上工作,但我遇到了一个问题。 . .我需要顶部的导航栏在超小屏幕上以折叠状态加载。现在,该栏在 XS 屏幕上是垂直
我正在学习使用 Ruby on Rails 编写代码,并且正在制作一个随机网页。我添加了 Bootstrap 导航栏。 我正在尝试将导航栏的边框更改为无,而不是: .navbar { bord
每当我学习 ionic 的教程时,我都会看到短语 *navbar。这是什么意思?我知道 * 表示它在模板中插入标签,但无法真正理解这个表达式.. 最佳答
我不知道如何正确表达这一点,但我想做的是让顶部栏( http://puu.sh/iNdBj/7f11027db0.png )在向下滚动时折叠并在回到顶部时重新出现,我想让底部栏填充顶栏的位置。 目前的
这是我第一次使用 bootstrap,我使用 roots 主题作为准系统模板。我在 header-top-navbar.php 的 navbar-header 元素中放置了一个图像我还将它放在一个 d
在我网站的顶部,主要的导航类是: navbar navbar-default navbar-fixed-top bg 我正在努力做到这一点,当你滚动时,类会更改为这样我就可以创建一个更优雅、更简单的滚
这是我的问题: collapse problem 如您所见,我的 navbar-collapse div 进入了导航栏区域。你能帮我解决一下吗? Title
我已经为类尝试了很多不同的选项来更改 navbar 上的文本颜色,特别是 navbar-brand 元素。我的 .navbar-brand color:purple; CSS 类没有运行。你能帮我弄清
我正在尝试使用 nav navbar-nav navbar-right 创建一个下拉菜单。我让它在移动设备(较小的屏幕)上对齐但是当我点击下拉菜单时它不会将菜单项向下推但是而是下拉其他菜单项。我不确定
我的导航栏没有改变颜色。 Navbar.jsx 文件中的 Navbar.css 文件的路径是否正确? import React, { Component } from 'react'; import
我无法让我的 navbar-header 和 navbar-nav 元素正确排列。 navbar-header 在 navbar 中垂直居中,而 navbar-nav 看起来像是 align="top
当我的屏幕宽度达到 767px 时,导航会异常折叠。当我转到 768px 时,navbar-nav 会低于 navbar-brand。直到我达到 795px,navbar-brand 和 navbar
我正在尝试实现一个固定的导航栏,但是在一定的屏幕尺寸(〜宽度:989)之后,导航栏向下移动。它也不适用于移动设备。 图片: 导航栏完全贴在页脚上,而不是停留在页面顶部。 您可以在以下位置查看代码:ht
我正在尝试右对齐我的 NavBar,但每当我添加 float:right 时,导航栏都会向右移动,但似乎已禁用。 参见此处:goo.gl/46yUrt 代码: /** * 4.2 Navigatio
我正在使用 Bootstrap 4,我希望我的 navbar-toggler 出现在 navbar-brand 之前,例如 this ,但是如果我将 navbar-toggler 放在第一位,我的对齐
如何使 navbar-header 全宽或单独成一行? 我在 collapse navbar-collapse 上添加了 clear:both; 但所有的填充都弄乱了。
.navbar 和 .navbar a 有什么区别 .navbar { overflow: hidden; background-color: #333;
在 Twitter bootstrap 的 starter-template.html 中,navbar 写成 ... 但是,如果我将标记更改为
我是一名优秀的程序员,十分优秀!