CSS - 滚动到固定框一次

Question

我试图找出如何在用户向下滚动到移动页面时修复红色框。

用户可以向下滚动蓝色框，但红色框将保持原位。除非用户滚动到页面顶部，否则红色框将消失。

想法是用户将选择要执行的活动（在蓝色框中），这些活动的总费用将显示在红色框中。

Answer 1

我创建了一个fiddle来完成我认为你想要的东西。

这是javascript：

$(document).ready(function(){

    $(window).scroll(function(){
        if ( $(window).scrollTop() >= $('#blue').offset().top ){
            $('#red').show();
        }
        else{
            $('#red').hide();
        }
    });

});

和css：

#red{
    height: 100px;
    background-color: red;
    position: fixed;
    left: 5px;
    top: 0px;
    display: none;
    width: 140px;
    padding: 5px;
}
#blue{
    height: 1200px;
    margin-top: 100px;
    margin-left: 150px;
    background-color: blue;
    color: white;
    padding: 10px;
}