javascript - jquery 在页眉和页脚之间滚动

Question

我试图在我的页面顶部保留一个 div，但是当我越过我的观点时，我想在另一个 div 之前停止滚动..

<div class="my-top"><p>This is my top</p></div>
    <div class="big-one">
        <div class="mini1">
            <p>TEST 1</p>
        </div>
        <div class="mini2">
            <div id="mini-mini2">
                <p>Need to scroll</p>
            </div>
        </div>
    </div>
    <div class="my-footer">
        <p>This is my footer</p>
    </div>

这是一个 fiddle => https://jsfiddle.net/2q773opz/3/

当我滚动时，我的 div 下降但她可以在“mini2”结束时停止，她回到他的顶部:( 我错过了什么？感谢您的帮助^^

Answer 1

如果您将#mini-mini2 的父级设置为position:relative，您可以绝对定位#mini-mini2 在里面。然后简单地让你的 JS 将元素的位置 top 设置为当前 scrollTop 减去标题高度(使用类似的逻辑来防止 #mini-mini2 免于被推得太远。

这是基本的，但作为概念证明请看这个例子:

$(document).ready(function() {
    var breaking = $('.big-one').offset().top;
    var limit = $('.my-footer').offset().top - $('#mini-mini2').height();
    $(window).scroll(function() {
        var scrolltop = $(window).scrollTop();
        var top = scrolltop - breaking;
        if (scrolltop > breaking && scrolltop < limit) {
            $('#mini-mini2').css("top", top);
        }
    });
});

.my-top,
.my-footer {
    width: 100%;
    height;
    50px;
    border: 1px solid;
}

.my-top {
    height: 250px;
}

.my-footer {
    height: 450px;
}

.big-one {
    display: table;
    width: 100%;
}

.mini1 {
    display: table-cell;
    width: 74%;
    border: 1px solid;
    height: 250px;
}

.mini2 {
    display: table-cell;
    width: 24%;
    border: 1px solid;
    position: relative;
}

#mini-mini2 {
    display: block;
    border: 1px solid #ff0000;
    text-align: center;
    background-color: #fff;
}


/*.big-one div.floatable {position:fixed;top:2px;}*/

#mini-mini2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-top">
    <p>
        This is my top
    </p>
</div>
<div class="big-one">
    <div class="mini1">
        <p>
            TEST 1
        </p>
    </div>
    <div class="mini2">
        <div id="mini-mini2">
            <p>
                Need to scroll
            </p>
        </div>
    </div>
</div>
<div class="my-footer">
    <p>
        This is my footer
    </p>
</div>

还有:Updated jsFiddle

---

更新

虽然上面的版本有效，但如果您滚动得太快，可能会错位 #mini-mini2。为了解决这个问题，最好切换元素 position:fixed 和 top 与 bottom 以便让它像这样正确放置:

$(document).ready(function() {
    var breaking = $('.big-one').offset().top;
    var limit = $('.my-footer').offset().top - $('#mini-mini2').height();

    $('#mini-mini2').css("width",$('.mini2').width());
    $(window).resize(function() {
    	$('#mini-mini2').css("width",$('.mini2').width());
    });
    $(window).scroll(function() {
        var scrolltop = $(window).scrollTop();
        var top = scrolltop - breaking;
        if (scrolltop > breaking && scrolltop < limit) {
            $('#mini-mini2').addClass("fixed");
        	$('#mini-mini2').css("bottom", "auto");
            $('#mini-mini2').css("top", 0);
        } else if(scrolltop > breaking) {
        	$('#mini-mini2').removeClass("fixed");
        	$('#mini-mini2').css("bottom", 0);
            $('#mini-mini2').css("top", "auto");
        } else {
        	$('#mini-mini2').removeClass("fixed");
        	$('#mini-mini2').css("bottom", "auto");
            $('#mini-mini2').css("top", 0);
        }
    });
});

.my-top,
.my-footer {
    width: 100%;
    height;
    50px;
    border: 1px solid;
}

.my-top {
    height: 250px;
}

.my-footer {
    height: 450px;
}

.big-one {
    display: table;
    width: 100%;
}

.mini1 {
    display: table-cell;
    width: 74%;
    border: 1px solid;
    height: 250px;
}

.mini2 {
    display: table-cell;
    width: 24%;
    border: 1px solid;
    position: relative;
}

#mini-mini2 {
    display: block;
    border: 1px solid #ff0000;
    text-align: center;
    background-color: #fff;
}


/*.big-one div.floatable {position:fixed;top:2px;}*/

#mini-mini2 {
    position: absolute;
    top: 0;

}
#mini-mini2.fixed {
    position: fixed;
    top: 0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-top">
    <p>
        This is my top
    </p>
</div>
<div class="big-one">
    <div class="mini1">
        <p>
            TEST 1
        </p>
    </div>
    <div class="mini2">
        <div id="mini-mini2">
            <p>
                Need to scroll
            </p>
        </div>
    </div>
</div>
<div class="my-footer">
    <p>
        This is my footer
    </p>
</div>

还有:Updated jsFiddle