如何使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;
}