如何使div貼在滾動頁面的頂部附近？

Question

當滾動時滾動到紅色標題div的底部邊緣時，如何獲得此頁面上的兩個紫色按鈕（或更確切地說，白色的父容器slide2）粘貼在紅色標題div的正下方？

我創建了這個小提琴： http : //jsfiddle.net/baumdexterous/K7NSX/

我要完成的任務的類似示例： http : //jsbin.com/ijexe

HTML：

<div id="container">

    <div class="menu">
        <div class="container clearfix">

            <div id="header" class="grid_12">
            </div>
        </div>
    </div>


    <div class="slide" id="slide1">
        <div class="container clearfix">

            <div id="section1" class="grid_12">
            </div>


        </div>
    </div>

    <div class="slide" id="slide2">
        <div class="container clearfix">

            <div id="test" class="grid_6">
                <a href="" target="_blank" class="btn1"></a>
            </div>

            <div id="test" class="grid_6 omega">
                <a href="" target="_blank" class="btn2"></a>
            </div>

        </div>
    </div>

    <div class="slide" id="slide3">
        <div class="container clearfix">

            <div id="section3" class="grid_12">
            </div>
        </div>
</div>

非常感謝！

Answer 1

檢查一下……這就是您想要的。

http://www.jsfiddle.net/5ADzD/1

$window.scroll(function(event) {
   var scrollTop = $window.scrollTop()
   if (scrollTop >  ... )
   {
       //execute code
   }
   else
   {
       //execute other code
   } 
});

Answer 2

試試這個腳本。

 var $window = $(window);
            $stickyEl = $('#youelementID');
            var elTop = $stickyEl.offset().top;
            $window.scroll(function() {
                var windowTop = $window.scrollTop();
                $stickyEl.toggleClass('sticky', windowTop > elTop);
            });

///和CSS

.sticky
{
    position: fixed;
    top: 0px;
}