刚刚学会了flexbox,并决定用它制作一个导航栏.结束制作一个非常好看的导航栏.

只有当我将其切换到位置：固定时,它缩小到一半大小并改变位置.我修复了所有这些,但是在给页面最小宽度之前.当向右滚动时,我注意到导航栏没有向右滚动页面,一些内容不在页面上.

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