Mehrere Sticky Header und Sidebars

Question

Ich habe das Web für eine Weile gesucht und ich hatte kein Glück damit. Was ich erreichen möchte, ist ein multiple sticky div's Also möchte ich das Menü beim Scrollen am oberen Rand der Seite bleiben, dann wenn es an der Sidebar ankommt bleibt es unter dem Menü, dann klebt die zweite Sidebar darunter das Menü auch auf dem gleichen Niveau wie die andere Seitenleiste Ich habe irgendwie eine Seitenleiste erreicht, aber es sieht eher schlampig aus ... Ich habe eine wirklich grobe Skizze gemacht, hoffentlich kann mir jemand helfen oder mich zu einem Tutorial dazu führen? Danke Jungs :)

Answer 1

Vielen Dank für die Antwort! es half aber war nicht voll was ich suchte, ich nahm den einzelnen klebrigen Ansatz! Also ich denke, ich habe es herausgefunden, aber ich habe ein Problem, wo das Top-Menü nicht an der Spitze Flush, vielleicht eine Hand auf herauszufinden, was das Problem ist geschätzt wird? :)

/*----------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{ 
 
    \t width: 100%; 
 
    \t text-align: center; 
 
    \t font-size: 20px; 
 
    \t line-height: 80px; 
 
    \t height: 120px; 
 
    \t background: #335C7D; 
 
    \t color: #fff; 
 
    \t transition: all 0.4s ease; 
 
} 
 
header.sticky { 
 
    \t font-size: 24px; 
 
    \t line-height: 48px; 
 
    \t height: 80px; 
 
    \t background: #8A492C; 
 
    \t text-align: left; 
 
    \t padding-left: 20px; 
 
} 
 
#banner{ 
 
\t background-color: dark grey; 
 
\t width: 100%; 
 
\t padding: 40px 0; 
 
\t color: white; 
 
\t 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>