$（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'); 
}​