如何在滾動頁面頂部附近製作div貼？

如何獲得這個頁面上的兩個紫色按鈕（或者更確切地說，是白色父容器slide2），當它滾動時碰到它的底部邊緣時，它會緊貼紅色標題div下方？如何在滾動頁面頂部附近製作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>

非常感謝！

來源

2013-09-30 Ori

看看這個......這是你想要的。

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

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

來源

2013-09-30 23:44:16

不，不完全是我一直在尋找。我找不到StackOverflow上的一個例子，但它完成了我希望做的事情。不過謝謝。 – Ori

再次檢查。我編輯了鏈接。 –

你檢查了新的鏈接嗎？ –

試試這個腳本。

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

來源

2013-09-30 23:57:05

如何在滾動頁面頂部附近製作div貼？

回答

相關問題