javascript - 多个粘性标题和侧边栏

Question

我已经在网上搜索了一段时间了，但一直没有成功。我想要实现的是多个粘性 div所以我希望菜单在向下滚动时粘在页面顶部，然后当它到达侧边栏时它粘在菜单下面，然后第二个侧边栏粘在菜单下面也与另一个侧边栏处于同一水平我有点实现了一个侧边栏的粘附，但它看起来相当草率......我画了一个非常粗略的草图，希望有人能帮助我或指导我做这件事的教程？谢谢你们:)

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{
  	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>