如何修复flexbox位置：修复了navbar JS / CSS bug

Question

Just learned flexbox, and decided to make a navbar out of it. Ended up making a really nice looking navbar.

Only when I switched it to position: fixed , it shrunk to half the size and changed positions. I fixed all this up, however before I had given the page a minimum width. When scrolling right, I noticed the navbar didnt scroll right with the page and some of the contents were off the page.

I fixed this with jQuery however the navbar wasnt scrolling smoothly, and was flickering as I scrolled up and down. The code below is my solution thus far to this problem.

I can now scroll up and down smoothly with the navbar in position-fixed mode. and when I reach the page's minimum width, I can scroll left and right of the navbar at the top as well. But now I have another problem. when I reach the page's minimum width and scroll right, and then scroll down, the navbar goes into position:fixed mode, and therefore jumps to the wrong position at the top. When I use the horizontal scroll bar again, it jumps back into its proper place after switching to position: absolute . Is there a way I can fix this so it doesn't go out of position when I scroll right?

the jquery code I have so far is as follows:

 $(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;
}

});

the page I'm working on regarding the navbar is in the following link if you wish to observe the behaviour.

https://www.cliquenext.com/sandbox.php

If you need any other code snippets please let me know.

Answer 1

I think you don't even need JavaScript or jQuery to achieve what you want. It's important that you give your flexed navigation a width of 100% and a height.

To demonstrate this I've created a simple navigation made with flex and an absolute div with the content underneath it.

In the live example I filled the div #content with lots of text so you can see how the navigation behaves if you have to scroll down or to the right.

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> 

Answer 2

Sorry to answer my own question

I have come to the conclusion that position:fixed elements can not scroll right with the page after a minimum width. therefore I have decided to change my design approach. I have set the minimum width of the page and navbar at 768px.

any desktop will be larger in size than 768px and can always increase window size to use the full navbar.

small mobile devices will be re-directed to a sub domain with an alternative layout using a mobile version layout instead of the original desktop version layout of the page. This is to be designed later.

If you guys have any solutions to the problem without having to produce an extra scrollbar feel free to still post. it would be educational.

Edit: check out https://www.cliquenext.com/sandbox.php to see my new design approach. the top div and navbar always stay in place. the sidebars are also fixed but scrollable. the main div in the center now scrolls with the page while the other components stay in place.