javascript - 如何在滚动页面顶部附近制作一个div？

Question

我怎样才能让这个页面上的两个紫色按钮（或者更确切地说是白色父容器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;
}