在滾動時保持元素在視圖中，但在與另一個指定元素「碰撞」時使用jQuery停止元素

Question

我在幾個網站上看到了這種效果（CSS Wizardry - 觀看徽標/導航欄），元素停留在視圖中向下滾動頁面（這不是困難的部分）&然後在與指定元素（硬部分）「碰撞」（因爲想要更好的單詞）時停止滾動。

我已經發現了兩個插件，做的目的只是這一點，但沒有我需要的所有功能：

1. jQuery的lockScroll http://www.anthonymclin.com/code/7-miscellaneous/108-jquery-lockscroll-13

這迫使所需的元素有固定的位置首先，這可能意味着如果元素開始低於倍數，它是從來沒有看到。 （演示：http://www.anthonymclin.com/media/demos/jquery.lockScroll.1.3/）

2. jQuery的fixedScroll上CSS Wizardry

再次使用固定&這迫使位置，它需要一個頂級爲了工作所抵消。此偏移量應用於DOMReady &如果元素不在該位置，則移動元素 - 它是滾動時使用的偏移量。

插件，我知道的不會產生預期的效果：

• https://github.com/dutchcelt/Keep-in-View
• http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

我需要能有兩全其美&的不幸，我自己無法做到這一點，有誰知道我沒有列出或知道修改另一種方法的插件嗎？

Answer 1

我喜歡這個

http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

似乎Twitter的引導比較好。

Answer 2

看起來，如果你改變

 $(window).bind('load scroll', function(e) { 

     if ($(window).scrollTop() + offsetTop >= lockPosition) { 
      el.css({ position: "absolute", top: lockPosition }); 
     } else { 
      el.css({ position: "fixed", top: offsetTop }); 
     } 
    }); 

到

 $(window).bind('load scroll', function(e) { 

     if ($(window).scrollTop() + offsetTop >= maxlockPosition) { 
      el.css({ position: "absolute", bottom: maxlockPosition }); 
     } else if ($(window).scrollTop() + offsetTop >= lockPosition) { 
      el.css({ position: "absolute", top: lockPosition }); 
     } else { 
      el.css({ position: "fixed", top: offsetTop }); 
     } 
    }); 

，並設置maxlockPosition到要阻止的元素的位置csswizardry使用http://csswizardry.com/wp-content/themes/new/js/jquery.scroll-lock.js

。