jQuery : 페이지가 아래로 스크롤 되어도 페이지 중심에 div를 유지하십시오.

Question

페이지를 아래/위로 스크롤 할 때 div가 페이지 중앙으로 부드럽게 스크롤되도록 div를 가운데에 놓고 싶습니다. 나는 this code (please see jsfiddle),을 시도하고 있지만 작동하지 않습니다. 누군가 그것을 도와 줄 수 있습니까? 감사.

Answer 1

position: fixed으로 표시하고 사용자가 스크롤하는 위치와 상관없이 그 위치에 두지 않는 이유는 무엇입니까? 그렇다면 자바 스크립트 속임수가 필요하지 않습니다. 단지 사용

이

$(window).scroll(function() { $('#box').center(); }); 

Answer 2

당신은 그것을 위해 jQuery를 필요가 없습니다

그러나, 현재의 문제에 대답하기 위해, 당신은 당신이 윈도우의 스크롤 이벤트에 반응하지 번을 중심으로 제공하는 것 CSS

HTML

<div id="senad">content</div> 

CSS

#senad { width: 200px; height: 200px; position: fixed; top: 50%; left: 50%; border: 1px solid gray;} 

Thi는 요소를 가운데에 유지합니다.

Answer 3

여기 있습니다. document.body.scrollTop의 스크롤 이벤트와 고려 업데이트

http://jsfiddle.net/8Dupa/4/

$ (창) .scroll (함수() {$ ('# 상자') 센터();.});

및 센터()

가기 + = document.body.scrollTop 내의

;

Answer 4

사용이 플러그인 : 높이가 더있는 경우, 사업부의 절반이 숨겨진 유지되도록 사업부의 높이가 항상 동일하지 않기 때문에

jQuery.fn.center = function(){ 
this.css("position","absolute"); 
this.css("top","50%"); 
this.css("left","50%"); 
this.css("margin-top","-"+(this.height()/2)+"px"); 
this.css("margin-left","-"+(this.width()/2)+"px"); 
return this;} 

$("#id").center();