如何在滚动页面顶部附近制作一个div棒?

时间:2013-09-30 23:38:10

标签: javascript jquery

如果在滚动时撞到它的下边缘时,如何将此页面上的两个紫色按钮(或者更确切地说是白色父容器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>

非常感谢!

2 个答案:

答案 0 :(得分:2)

检查出来......这就是你想要的。

<强> http://www.jsfiddle.net/5ADzD/1

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

答案 1 :(得分:0)

试试这个脚本。

 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;
}