確定項目的位置，並觸發滾動

當前代碼： http://jsfiddle.net/gridnik/2s1w6cbL/確定項目的位置，並觸發滾動

<div class="fixed"> 
</div> 

<div class="content"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div>

正如你所看到的，我有一個固定的div（背景圖像，「覆蓋」和「不透明度」屬性）之上所有內容和下面的內容div。我想要的是;當用戶向下滾動時，頂部div會首先滾動。當頂部div從視口滑出時，content div開始滾動。

這裏有一個快速的動畫，以明確：

來源

2015-04-06 Manuel Little

這是對你的要求嗎？

$(window).on("mousewheel", function(e) { 
      e.preventDefault(); 
      $('.fixed').animate({ 
       marginTop:'+=30px' 
      }, 0); 
      if($('.fixed').offset().top >= $(window).height(){$(this).unbind('mousewheel'); 
$('.content').css('position','absolute')} 
     });

http://jsfiddle.net/hxqyz39p/

更新：http://jsfiddle.net/hxqyz39p/1/

來源

2015-04-06 11:53:57 EddNewGate

謝謝，但，這不是正是我想要的。 – 2015-04-06 12:46:59

我到底錯過了什麼？ – EddNewGate 2015-04-06 12:49:40

對不起，我應該提供更多信息。頂部div不水平滾動。感覺像一些白色的div從「頂部」div的頂部滑入。而且它不可逆轉。我的意思是，當我滾動頁面的頂部時，「頂部」div不會滑入。 – 2015-04-06 13:13:59

這是一個在JS/jQuery的獨自解決相當複雜的問題。

我建議看看position: sticky的CSS實現，但它並不是瀏覽器廣泛支持的東西。（。但在我的經驗，這是解決這個最好的技術，它適用於iOS，這是一大利好）

下面是關於瀏覽器的支持信息：http://caniuse.com/#feat=css-sticky

下面是對其他瀏覽器填充工具： https://github.com/filamentgroup/fixed-sticky（含演示）

更新：這裏有一個概念證明（工作在Firefox和Safari）：http://jsfiddle.net/2s1w6cbL/2/

來源

2015-04-06 11:54:12 Marius

謝謝Marius，它看起來很有希望 – 2015-04-06 12:46:04

好的，很樂意提供幫助。再次讀你的問題，我意識到我的例子可能並沒有做你想要的東西，但有一些調整它應該:) – Marius 2015-04-06 12:49:02

確定項目的位置，並觸發滾動

回答

相關問題