$（window）.resize和$（「＃foo」）上的觸發函數。scroll

Question

想要在$（window）.resize和$（「＃foo」）。scroll上觸發相同的函數。

http://jsfiddle.net/ySukf/1/

需要#stick堅持的#foo頂部。問題在於，滾動時以及調整窗口大小時，#stick的位置會有點跳動。任何幫助？

Answer 1

Here's a solution

首先，我們增加兩個容器 - 一個.content DIV中#foo和.inner DIV中#stick：

<div id="foo"> 
    <div class="content"> 
     <p>Lorem ipsum dolor sit amet.</p> 
     <div id="stick"> 
      <div class="inner">stick</div> 
     </div> 
     <p>...</p> 
    </div> 
</div>​ 

注意#anchor走了。

的容器中的CSS被一分爲二：

#foo { 
    position: relative; 
    margin: 50px auto; 
    width: 200px; 
    height: 200px; 
} 
#foo .content { 
    width: inherit; 
    height: inherit; 
    overflow: auto; 
} 

而且我們採用以下的#stick。內框從外部繼承它的大小。

#stick { 
    width: 100px; 
    height: 50px; 
} 
#stick .inner { 
    width: inherit; 
    height: inherit; 
    background: pink; 
} 
#stick.stuck .inner { 
    position: absolute; 
    top: 0; 
} 

幾乎一切都需要在CSS護理 - JavaScript是：

$(document).ready(function() { 
    $("#foo .content").scroll(stickyTop); 
    $(window).resize(stickyTop); 
}); 

function stickyTop() { 
    //position is now relative to #foo 
    if ($("#stick").position().top < 0) 
     $("#stick").addClass('stuck'); 
    else 
     $('#stick').removeClass('stuck'); 
}​