固定导航栏仅适用于HTML / CSS

Question

As i said i the title, i wanna make a web page with fixed navbar in aside .

(I know how to make it in the top of document) .

So i tried 2-3 layout ( Flexbox and Columns ) .

But with neither of them i couldn't make it work perfectly.

This is my test code, although you can see it in jsFiddle

 $(window).scroll(function(){ var navs = document.getElementsByTagName("nav")[0]; var heigh = $("header:first").outerHeight(); var wid = $("nav:first").width(); if (wid != $(window).width() && document.body.scrollTop >= heigh) { navs.style.position = "fixed"; $("nav").css("top","0"); } else navs.style.position = "relative"; }); 

 * { box-sizing: border-box; } html, body { font-size: 35px; padding: 0; margin: 0; display: block; } .row::after { content: ""; clear: both; display: block; } header, footer { text-align: left; padding: 30px; margin: 0; } header h1 { margin: 0; padding: 0; } nav { background-color: #ff00ff; position: relative; overflow-y: scroll; height: 100%; top: 0; } ul { /*overflow: scroll;*/ } section{ background-color: #ff0000; padding: 0 80px; } .col-3 {width: 25%;float: left;} .col-9 {width: 75%;float: left;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <header><h1>HELL!<h1></header> <div class="row"> <nav class="col-3"> <ul> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>end</li> </ul> </nav> <section class="col-9"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt. </p></section> </div> <footer><h3>HELL!<h3></footer> 

So First : I want to know is there any way to do that without js and just with CSS ?

(or at least some of it.)

Second : What's the best way to doing such things?

Third : How i suppose to fill height of document with a little element?

(I actually killed my self, but couldn't find out!)

Fourth : If you could give me a sample, i appreciate it.

Thanks in advance.

‌

PS: I know if i use

.col-9 {float: right;}

It makes it better, but it's not an option!

Answer 1

Apply some left margin to the container on the right when the nav is fixed since it gets removed from the flow.

 $(window).scroll(function() { var navs = document.getElementsByTagName("nav")[0]; var heigh = $("header:first").outerHeight(); var wid = $("nav:first").width(); if (wid != $(window).width() && document.body.scrollTop >= heigh) { navs.style.position = "fixed"; $("nav").css("top", "0"); // Here is the fix $('.col-9').css('margin-left', wid); } else { navs.style.position = "relative"; $('.col-9').css('margin-left', 0); } }); 

 * { box-sizing: border-box; } html, body { font-size: 35px; padding: 0; margin: 0; display: block; } .row::after { content: ""; clear: both; display: block; } header, footer { text-align: left; padding: 30px; margin: 0; } header h1 { margin: 0; padding: 0; } nav { background-color: #ff00ff; position: relative; overflow-y: scroll; height: 100%; top: 0; } ul { /*overflow: scroll;*/ } section { background-color: #ff0000; padding: 0 80px; } .col-3 { width: 25%; float: left; } .col-9 { width: 75%; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <header> <h1>HELL!<h1></header> <div class="row"> <nav class="col-3"> <ul> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>third</li> <li>first</li> <li>second</li> <li>end</li> </ul> </nav> <section class="col-9"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt. </p></section> </div> <footer><h3>HELL!<h3></footer>