I'm creating a fixed navigation at the top of the webpage. But then the wrapper content would overlap. So I'm setting the margin-top with jQuery:
$('#wrapper').css('margin-top', function() {return $('nav').height();});nav {
background-color: #cccccc;
position: fixed;
top: 0;
width: 100%;
line-height: 2.5;
}
@media screen and (min-width: 800px) {
nav {
line-height: 1.5;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<nav>
NAV
</nav>
<div id="wrapper">
<header id="header" class="alt">
HEADER
</header>
<main>
Lorem <br>
ipsum <br>
dolor <br>
sit <br>
amet <br>
</main>
</div>But then, if I open the page in a small window and then maximize it, the nav will resize but the margin-top will stay the same.
As I understand, the css function is called only once. Is it possible to bind margin-top of the #wrapper to the height of nav?
Set it on document ready and on window resize. For instance:
function setWrapper() {
$('#wrapper').css('margin-top', $('nav').height() );
};
$(setWrapper);
$(window).resize(setWrapper);
You may also want to throttle or debounce the call to the function.
An alternative would be to use "regular" css and media queries to set the margin-top.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments