刚刚学习了 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/