using this guide, I've been trying to make this navigation work but still no luck. I tried fiddling and editing with the javascript/css and this is my code so far:
<header> <div id="featured"> <section style="background:red;"> ... </section> </div> </header> <nav id="navigation"> <section style="background-color:white;"> <p>Navigation</p> </section> </nav> <div class="elearning"> <article> <section style="background:green; height:1200px;"> <p>Content goes here.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis eleifend suscipit. Vestibulum pulvinar nisi et felis consequat, in iaculis est tristique. In porttitor tempus ligula non finibus. Aenean maximus purus odio, ut pharetra mauris laoreet eu. Integer at lorem ut erat viverra euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum dui mi, vehicula vitae lorem ac, mollis facilisis diam. Integer non nisi at ante posuere dignissim sed sed quam. Sed neque lectus, volutpat vel quam ac, malesuada venenatis lorem. Etiam tempus arcu augue, in dapibus ante aliquet commodo. Pellentesque faucibus nisi est, id feugiat ipsum malesuada a. Donec consectetur tellus eget augue elementum, vel ultricies dolor tempor. Proin nulla turpis, molestie at sagittis sed, mattis quis ante. Mauris et facilisis tortor, non ornare orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut luctus ac neque quis vestibulum. Maecenas ultricies mattis diam, vel lacinia dui scelerisque ut. Vestibulum luctus purus ut orci tincidunt fringilla. Praesent non urna pellentesque, cursus augue ut, ornare eros. Etiam commodo erat et tellus dictum vestibulum. In porttitor elit elit, ac rhoncus magna ultricies sit amet. Morbi quis ex quam. Integer vel nunc enim. Praesent mattis, odio eget cursus malesuada, odio ipsum pulvinar urna, eu lobortis orci nisl vel velit. Nam fringilla, nulla ac consectetur tempor, neque sem viverra urna, vel congue sapien nunc eget velit. Duis vel dui ipsum. Nunc dolor dui, luctus eget augue ac, posuere sollicitudin erat. Nulla facilisi. Etiam pellentesque, urna id cursus aliquam, enim tortor aliquet lorem, nec semper lorem est id nibh. Sed eget nisl vitae sem pretium finibus et ac dui. Integer vitae tortor vel magna feugiat accumsan. Vivamus dictum metus eget nisl posuere, gravida egestas ante volutpat. Mauris porttitor, nisl vitae vehicula fermentum, ante augue vehicula nibh, tristique scelerisque ante tortor ac diam. Fusce felis erat, porta vel purus eget, finibus egestas mi. Cras interdum velit sit amet ultricies venenatis. Mauris vehicula bibendum dui sit amet tincidunt. Vestibulum sodales, felis sit amet imperdiet fermentum, orci purus venenatis ipsum, at euismod magna nisi sit amet purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin a purus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque facilisis fermentum vulputate. Nulla quis nisi in enim bibendum consequat. Sed pharetra porta aliquam. Fusce neque nulla, vulputate sed mauris id, rhoncus fermentum velit. Nunc tempor vehicula tortor vel ullamcorper. Etiam laoreet porttitor elit, ut vulputate felis commodo eu. Pellentesque suscipit, risus eu finibus semper, arcu velit bibendum metus, vel mattis erat massa sit amet nisl. Maecenas hendrerit facilisis risus, eget fringilla leo consectetur ac. Integer eget justo ullamcorper, vehicula ex nec, tincidunt nulla. Integer ipsum odio, condimentum sed nulla nec, ultricies porta ligula. In convallis, nisl in interdum finibus, velit justo cursus turpis, ut mattis neque quam id magna. Quisque feugiat mauris at malesuada placerat. Donec malesuada urna sed euismod dapibus.</p> </section> </article> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="data/js/nav.js"></script>
@charset "UTF-8"; body { background-color:#FAFAFA; margin:0; padding-top:775px; } #featured { position:relative; margin-top:0; height:600px; width:100%; margin-bottom:20px; } header, .navigation-scroll {position:fixed; width:100%; top:0;} header { background-color:#000000; height:775px; width:100%; } .elearning, #navigation {position:relative;} #navigation { height:40px; background-color:#202020; z-index:150; box-shadow:0 2px 3px rgba(0,0,0, .4); } article { height:700px; border-top:#EAEAEA solid 2px; } section { width:1000px; margin-left:auto; margin-right:auto; position:relative; }
// nav.js $(document).ready(function() { var mn = $("#navigation"); $(window).scroll(function() { if($(this).scrollTop() > 775 ) { mn.addClass("navigation-scroll"); } else { mn.removeClass("navigation-scroll"); } }); });
I have a feeling that the problem is caused by the positioning of the divs in the CSS. Any ideas? Thanks in advance!
Change your class from:
.navigation-scroll { position: fixed, width: 100%, top: 0px; }
to:
#navigation.navigation-scroll { position: fixed, width: 100%, top: 0px; }
and everything will work!
The reason it is not working currently is because #navigation is a more specific selector than .navigation-scroll. By making a chained selector of #navigation.navigation-scroll, you are declaring a more specific selector which is what will be displayed.