i have fixed header , menu bar , there container div when scroll down container div not hide below menu bar shown in image below jquery code using. please solve issue.
var header= $('.header'); var start_div = $(header).offset().top; var menu_div = $('.menu'); var menu = $(menu_div ).offset().top; $.event.add(window, "scroll", function() { var p = $(window).scrolltop(); $(header).css('position',((p)>start_div ) ? 'fixed' : 'static'); $(header).css('top',((p)>start_div ) ? '0px' : ''); $(header).css('width','840px'); $(header).css('min-height','108px'); }); $.event.add(window, "scroll", function() { var p = $(window).scrolltop()+100; $(menu_div).css('position',((p)>menu) ? 'fixed' : 'static'); $(menu_div).css('top',((p)>menu) ? '110px' : ''); $(menu_div).css('width','575px'); $(menu_div).css('height','57px'); }); 
unless i'm missing don't need jquery or js that.
check snippet (codepen here)
html, body { width: 100%; height: 100%; background-color: white; } .header-wrapper { top: 0; right: 0; left: 0; position: fixed; height: 160px; background-color: white; } .header { background-color: cyan; height: 100px; width: 100%; } .menu { width: 100%; height: 50px; background-color: green; margin-top: 10px; } .content { color: #fff; background-color: black; margin-top: 170px; /* same height of header + nav + margins + 10px coolness*/ }<body> <div class="header-wrapper"> <div class="header">blue header</div> <div class="menu">green menu</div> </div> <div class="content"> content<br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> blabla <br><br><br><br><br><br><br><br><br><br><br><br><br><br> blabla <br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </body>
Comments
Post a Comment