Multiple Sticky Header and Sidebars

Question

I have been searching the web for awhile now and i have had no luck with this. What i would like to achieve is a multiple sticky div's So i would like the menu to stick to the top of the page when scrolling down, then when it gets to the sidebar it sticks under the menu, then the second sidebar sticks under the menu also at the same level as the other sidebar Ive kind of achieved one sidebar sticking but it looks rather sloppy... I made a really rough sketch, hopefully someone can help me or direct me to a tutorial on doing this? thank you guys :)

Answer 1

Thank you for the reply! it helped but wasnt fully what i was after, i took the individual sticky approach! So i think i have figured it out but im having a issue where the top menu wont stick to the top flush, maybe a hand on figuring out what the problem is would be appreciated? :)

 /*----------Header Sticky Script Start----------*/ $(window).scroll(function() { if ($(this).scrollTop() > 1){ $('header').addClass("sticky"); } else{ $('header').removeClass("sticky"); } }); /*----------Header Sticky Script Start----------*/ /*----------Menu Sticky Script Start----------*/ function sticky_relocate() { var window_top = $(window).scrollTop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) { $('#sticky').addClass('stick'); $('#sticky-anchor').height($('#sticky').outerHeight()); } else { $('#sticky').removeClass('stick'); $('#sticky-anchor').height(0); } } $(function() { $(window).scroll(sticky_relocate); sticky_relocate(); }); var dir = 1; var MIN_TOP = 200; var MAX_TOP = 350; function autoscroll() { var window_top = $(window).scrollTop() + dir; if (window_top >= MAX_TOP) { window_top = MAX_TOP; dir = -1; } else if (window_top <= MIN_TOP) { window_top = MIN_TOP; dir = 1; } $(window).scrollTop(window_top); window.setTimeout(autoscroll, 100); } /*----------Menu Sticky Script End----------*/ /*----------Sidebar Sticky Script Start----------*/ $(function() { var offset = $("#sidebar").offset(); var topPadding = 140; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#sidebar").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#sidebar").stop().animate({ marginTop: 0 }); }; }); }); /*----------Sidebar Sticky Script End----------*/ 

 .page-wrap{margin: 0 auto; width : 100%; } #content{float:left;width:70%;background-color: white; color: black; } #sidebar{float:right;width:30%; background-color: #565656;} header{ width: 100%; text-align: center; font-size: 20px; line-height: 80px; height: 120px; background: #335C7D; color: #fff; transition: all 0.4s ease; } header.sticky { font-size: 24px; line-height: 48px; height: 80px; background: #8A492C; text-align: left; padding-left: 20px; } #banner{ background-color: dark grey; width: 100%; padding: 40px 0; color: white; text-align: center; } #sticky { width: 100%; } #sticky.stick { margin-top: 0 !important; position: fixed; top: 0; z-index: 10000; border-radius: 0 0 0.5em 0.5em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="banner"> <p>Banner</p> </div> <div id="sticky-anchor"></div> <div id="sticky"> <header><h1>Sticky Header</h1></header> </div> <div class="page-wrap"> <div id="sidebar"> <p>Sticky Sidebar</p> <p>Sticky Sidebar</p> <p>Sticky Sidebar</p> <p>Sticky Sidebar</p> </div> <div id="content"> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> <p>Filler filler filler......</p> </div> </div>