Javascript 向下滚动时CSS/Jquery浮动元素位于顶部

我想使div（预订按钮）在向下滚动时浮在顶部。点击从顶部移动100-200px。 这是我的密码：

<div id="floatBox" style="z-index:5;">
        <div id="floatMenu" style="z-index:10;">
            <button style="button">CHECK IN</button> 
            <button style="button">CHECK OUT</button> 
            <button style="button">BOOK NOW</button>    
        </div>
        <div id="floatToggle" style="z-index:10;" class="text-center">
            <button id="toggleBotun"style="button">make reservation</button>
        </div>

    </div>

JQuery

$(function(){
    var fixedTop = $('#floatBox').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > fixedTop ) {
                    $('#toggleBotun').css({position: 'fixed', top: '0px'});
                    $('#floatBox').css('display', 'block');
                    $('#floatMenu').css('display', 'none');      
                    $('#floatToggle').removeClass('text-center');
            } else {
                    $('#toggleBotun').css({position: 'static', top: '0px'});
                    $('#floatToggle').addClass('text-center');
                    $('#floatMenu').show();
            }


    });
});
var clicked=true;
$("#toggleBotun").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $("#floatBox").css({"top": 0});
    }
    else
    {
        clicked=true;
        $("#floatBox").show();
        $("#floatBox").css({"top": "20%"});

    }
});

我希望你能理解我的问题：）

---

请帮助

有一个JSFIDLE会有帮助，你能添加一个吗？请参阅jsfiddle.com，但我的jsfiddle代码不像我的网页那样显示代码

$(function(){
    var fixedTop = $('#floatBox').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > fixedTop ) {
                    $('#toggleBotun').css({position: 'fixed', top: '0px'});
                    $('#floatBox').css('display', 'block');
                    $('#floatMenu').css('display', 'none');      
                    $('#floatToggle').removeClass('text-center');
            } else {
                    $('#toggleBotun').css({position: 'static', top: '0px'});
                    $('#floatToggle').addClass('text-center');
                    $('#floatMenu').show();
            }


    });
});
var clicked=true;
$("#toggleBotun").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $("#floatBox").css({"top": 0});
    }
    else
    {
        clicked=true;
        $("#floatBox").show();
        $("#floatBox").css({"top": "20%"});

    }
});