반응형
sidebar 요소의 position은 fixed
.sidebar{
position : fixed;
}
스크롤 위치에 맞춰 해당 요소의 margin-top이나 margin-left 속성을 실시간으로 변경해주어 이동하는 것처럼 보이게 하는 원리임.
//가로스크롤 시에는 고정하고 세로스크롤시에는 움직이는 경우
$(function() {
var marginTop = parseInt( $(".sidebar").css('margin-top') );
$(window).scroll(function(e) {
$(".sidebar").css("margin-top", marginTop - $(this).scrollTop() );
});
});
//세로스크롤 시에는 고정하고 기로스크롤시에는 움직이는 경우
$(function() {
var marginLeft = parseInt( $(".sidebar").css('margin-left') );
$(window).scroll(function(e) {
$(".sidebar").css("margin-left", marginLeft - $(this).scrollLeft() );
});
});| .scrollLeft() | 선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위치를 얻거나, 선택된 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다. |
| .scrollTop() | 선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나, 선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다. |
참고
스크롤바 위치 관련 내용
jQuery 입문 | 요소의 영역 | 요소의 스크롤 위치 .scrollLeft() .scrollTop()
요소의 스크롤 위치 jQuery는 선택한 요소의 스크롤 위치를 손쉽게 반환하고 설정 할 수 있는 메소드를 제공한다. 메소드 설명 .scrollLeft() 선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위
www.devkuma.com
세로 고정 가로 스크롤 내용
CSS 세로 고정 가로 스크롤 - 제타위키
다음 문자열 포함...
zetawiki.com
반응형
'코딩 관련 > Javascript와 jQuery, JSON' 카테고리의 다른 글
| [JAVASCRIPT] javascript radio check control (0) | 2022.10.11 |
|---|---|
| [Javascript] HTML 페이지 소스 가져오기 (0) | 2022.06.29 |
| [Javascript] 비동기를 동기처리하기 / javascript 동기 처리 (0) | 2022.04.18 |
| jQuery Alias / jquery $ 변경 (0) | 2022.04.05 |
| [Javascript] binary to image / binary image to file / file to image (0) | 2021.11.12 |