多个粘贴标题和侧边栏

Question

我一直在网上搜索一段时间，而且我对此没有任何好运。 我想实现的是多个粘性div的 所以我想菜单粘贴到页面的顶部向下滚动，然后当它到达侧边栏它粘在菜单下，然后第二个侧边栏粘在该菜单也在同一级别作为另一侧边栏 我有点实现了一个侧边贴，但它看起来相当sl ... ... 我做了一个非常粗略的草图，希望有人可以帮助我或指导我做这个教程？谢谢你们:)

Answer 1

谢谢你的回复！它帮助，但完全没有我以后，我采取个人粘性的方法！ 所以我想我已经找到了它，但即时通讯有一个问题，顶部菜单不会坚持顶部冲水，也许一只手搞清楚是什么问题将不胜感激？ :)

/*----------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>