jQuery on scroll with position : fixed

Question

부모 div가 100 % 너비 & 창 크기의 높이를 가진 레이아웃에서 작업하고 있습니다.

자식 div의 고정 된 치수는 400px overflow : auto이며 스크롤바를 표시하고 싶습니다.

이 하위 div에는 원하는 위치에 하나의 요소가 있습니다. 스크롤 이벤트에서 고정되었습니다. 내가 위치를 추가 할 때마다

내 문제가 : jQuery를

스크롤 이벤트를 사용하여 자식 DIV 내부 요소의 하나에 고정을,이 자식 DIV 심지어 자식 DIV 높은 Z- 인덱스 & 오버 플로우를 가지고있는 아웃 팝업 : 자동 여기

는

여기에 문제가 무엇입니까 Code & Fiddle을하고있다? 무엇이 고쳐 져야 하는가 ??

html로

<div id="wrapper"> 
    <div id="content"> 
     <p id="head">Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
    </div> 
</div> 

CSS

body, html { 
    height: 100% 
} 
#wrapper { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: #bbb; 
    z-index: 999 
} 
#content { 
    position: relative; 
    width: 400px; 
    height: 400px; 
    overflow: auto; 
    background: #eee; 
    z-index: 99 
} 
p { 
    width: 100%; 
    padding: 40px; 
} 
#head { 
    background: green 
} 
.fixed { 
    position: fixed; 
} 

JS 고정 위치는 항상 표시 영역에 상대적인

$("#content").scroll(function() { 
    if($(this).scrollTop() > 0) { 
     $('#head').addClass('fixed'); 
    } else { 
     $('#head').removeClass('fixed'); 
    }   
}); 

Answer 1

그래서 항상에 적용한 한 100 %의 폭 그렇게.

당신은 고정 요소에 폭 상속을 적용 할 수있는 그 어떤 브라우저에서 트릭을 수행하지만, 당신은 또한 요소에 부모의 폭을 패딩이 있기 때문에 늘 트릭을 하나

당신이 하드 코드의 폭에있을 것이다 이 경우 또는

Answer 2

Please set 

.fixed { 
    position: fixed; 
z-index: 0; 
} 

Answer 3

당신이 함께 플레이 할 수있는 자바 스크립트 솔루션의 페이지 요소에 320 ~이 도움이된다면 : http://jsfiddle.net/nWH3S/3/

$("#content").scroll(function() { 
    if ($(this).scrollTop() > 0) { 

    $('#head').addClass('fixed').css({ 
     width: $("#content").innerWidth()-20+"px" 
    }); 
    } else { 
    $('#head').removeClass('fixed').css({ 
     width: $(this).width() 
    }); 
    } 
}); 

그리고 바이올린을 치 쿠라.

이 하나는 다음과 같이 수정해야합니다 :

p { 
    width: 100%; 
    padding: 40px 0;// just made the padding for top bottom. 
    margin:0; 
}