Question

我现在已经在网上搜索了一段时间，但我没有运气。我想要实现的是多重粘性div 所以我希望菜单在向下滚动时粘在页面顶部，然后当它到达侧边栏时它会粘在菜单下，然后第二个侧边栏在菜单下面也与另一个侧边栏保持同一水平我有点实现了一个侧边栏，但看起来很草率...... 我做了一个非常粗略的草图，希望有人可以帮助我或指导我做这个教程吗？谢谢你们：）

Answer 1

谢谢你的回复！它帮助但并不完全是我所追求的，我采取了个人粘性方法！所以我想我已经弄明白但是我有一个问题，顶级菜单不会坚持顶级同花顺，也许一手确定问题是什么将被赞赏？：）

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

多个粘滞标头和侧边栏

1 个答案: