페이지를 아래로 스크롤하는 동안 div의 높이와 너비를 동시에 축소 할 수 있습니까? 예를 들어 사용자가 아래로 스크롤하면 div 크기는 400px에서 400px로 200px x 200px로 페이지 중앙에 유지됩니다. jQuery를 사용하여 높이 또는 너비를 줄이는 것이 가능하다는 것을 알고 있지만 두 가지를 모두 줄이는 데는 아무 것도 보지 못했습니다.스크롤하여 div의 높이와 너비를 모두 줄입니까?
높이와 너비를 모두 가져 와서 둘 다 감소시킨 다음 새 값을 스크롤 이벤트 내부에 다시 적용 할 수 있습니다.
var divToChange = $('#sizeShifter');
$(document).scroll(function(){
var divHeight = divToChange.height();
var divWidth = divToChange.width();
divHeight-=5;
divWidth-=5;
divToChange.css({width:divWidth, height:divHeight});
});
사용자가 위로 스크롤 할 때이 효과를 되돌릴 수도 있습니다. 이 작업은 좀 더 복잡하지만 여기서는 작업을 시작하기 위해 fiddle을 사용하고 있습니다.
줄 바꿈을 추가하여 스크롤 할 때 어떻게 보이는지 확인했습니다. 꽤 잘 돌아갑니다! 하지만 다시 스크롤하면 항상 400px로 400px로 되돌아가는 것은 아닙니다. 그럴 수 있을까요 'divHeight- = 5; divWidth- = 5; ' 페이지 맨 위로 위로 스크롤해도 재설정되지 않습니까? – superquestion
@superquestion 아마도 스크롤 속도에 달려 있습니다. 스크롤이 빠를수록 함수가 호출되는 횟수가 줄어 듭니다. 따라서, 느린 속도로 빠르게 스크롤하면 더 작은 div로 끝납니다. 크기를 항상 되돌리려면 http://jsfiddle.net/hmu3c/1/과 같은 식으로 처리해야합니다.이 코드는 상단으로부터의 거리를 기준으로 높이와 너비를 설정합니다. 따라서 상단의 크기는 항상 동일합니다. – zsaat14
동일한 ID로 이미지를 사용하면 마진 규칙이 더 이상 적용되지 않는 이유는 무엇입니까? (나는 이것을 왜 페이지 중앙에 수평으로 그리고 수직으로 가져 오려고 노력할 것인가? 왜 마진 규칙을 더 이상 적용하지 않는 것이 좋은 장소인지를 알게되었다.) 또한 나는 이미지를 멈출 수있는 방법이있을 것이라고 확신한다. 일단 그것이 특정 크기가되면 수축에서, 그리고 일단 그 크기에 있으면, 이미지는 더 이상 뷰포트의 중앙에 고정되지 않을 것입니다. (저는 이것이 시차 종류의 물건에 들어가고 있음을 확신합니다). http://jsfiddle.net/hmu3c/1/ – superquestion
예 scrollTop을 사용하여 문서의 위치를 잡기 위해 scroll 이벤트를 사용하고 $ (div) .width를 사용하여 div의 너비를 설정하고 height/use .css()를 사용하여 div의 너비를 설정하십시오. – Rohan