코드 재활용 및 저장 차원에서....
혹시 나중에 나도 스킨을 바꿀지 모르니까....
오디세이 스킨에서도 사이바 고정을 원한다면...
1. 스르륵 따라오는 버전
@media screen and (max-width:1060px) {
aside.area-aside {
margin-top: 0 !important;
}
}
.main { align-items: flex-start; }
aside.area-aside {
transition: margin-top 0.5s ease-in-out 0s, right .5s;
}
//// 아래 offset 함수는 퀵점프에 이용된 함수라, 이미 html상 존재한다면 삭제해도 됨
function offset(el) {
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
////
(function() {
var lastScrollTop = 0;
var article = document.querySelector(".area-main"); //본문영역 id
var aside = document.querySelector(".area-aside"); //사이드바 id
var initT = parseInt(window.getComputedStyle(aside, null).marginTop);
if (document.documentElement.clientWidth > 1060 && article.offsetHeight > aside.offsetHeight) {
window.addEventListener("scroll", function() {
var scrT = window.pageYOffset || document.documentElement.scrollTop;
var winH = document.documentElement.clientHeight;
var sideH = aside.offsetHeight;
var dir = (scrT > lastScrollTop) ? "down" : "up"; lastScrollTop = scrT;
var sideT = offset(aside).top;
var topLine = offset(article).top + initT;
var bottomLine = topLine + article.offsetHeight - winH;
if (sideH > winH) {
if (dir == "down") {
if (scrT >= (sideT + sideH - winH) && scrT < bottomLine) {
aside.style.marginTop = scrT - topLine - (sideH - winH) + 'px';
}
if (scrT >= bottomLine) {
aside.style.marginTop = Math.max(article.offsetHeight - sideH - topLine, 0) + 'px';
}
} else {
if (scrT <= sideT && scrT > topLine) {
aside.style.marginTop = scrT - topLine + 'px';
}
if (scrT <= topLine) {
aside.style.marginTop = initT + 'px';
}
}
} else {
bottomLine = topLine + article.offsetHeight - sideH;
if (dir == "down") {
if (scrT > topLine && scrT < bottomLine) {
aside.style.marginTop = scrT - topLine + initT + 'px';
}
if (scrT >= bottomLine) {
aside.style.marginTop = bottomLine - topLine + 'px';
}
} else {
if (scrT > topLine && scrT < bottomLine) {
aside.style.marginTop = scrT - topLine + initT + 'px';
}
if (scrT <= topLine) {
aside.style.marginTop = initT + 'px';
}
}
}
});
}
})();
2. 찰싹! 붙는 버전
@media screen and (max-width:1059px) {
aside.area-aside {
position: fixed !important;
top: 0 !important;
right: -100% !important;
}
.area-aside.area-aside-on {
right: 0 !important;
}
}
.main {
align-items: flex-start;
}
//// 아래 offset 함수는 퀵점프에 이용된 함수라, 이미 html상 존재한다면 삭제해도 됨
function offset(el) {
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
////
var sidebarSticked = false;
stickySidebar();
window.addEventListener("resize", stickySidebar);
window.addEventListener("orientationChange", stickySidebar);
function stickySidebar() {
var aside = document.querySelector(".area-aside");
var article = document.querySelector(".area-main");
var winW = document.documentElement.clientWidth;
if (winW > 1059 && article.offsetHeight > aside.offsetHeight) {
var parentWidth = aside.parentNode.offsetWidth - parseInt(window.getComputedStyle(aside.parentNode, null).paddingLeft) - parseInt(window.getComputedStyle(aside.parentNode, null).paddingRight);
aside.style.right = (winW - parentWidth)/2 + 'px';
aside.style.position = "absolute";
aside.style.top = "unset";
aside.style.bottom = "unset";
if (!sidebarSticked) {
sidebarSticked = true;
var lastScrollTop = 0;
window.addEventListener("scroll", function() {
if (document.documentElement.clientWidth < 1060 && article.offsetHeight < aside.offsetHeight) { return; }
var scrT = window.pageYOffset || document.documentElement.scrollTop;
var winH = document.documentElement.clientHeight;
var sideH = aside.offsetHeight;
var dir = (scrT > lastScrollTop) ? "down" : "up";
lastScrollTop = scrT;
var sideT = offset(aside).top;
var topLine = offset(article).top;
var bottomLine = topLine + article.offsetHeight - winH;
if (sideH > winH) {
if (dir == "down") {
if (scrT >= (sideT - winH + sideH) && scrT < bottomLine && aside.style.position != 'fixed') {
aside.style.top = 'unset';
aside.style.bottom = 0;
aside.style.position = 'fixed';
}
if (scrT >= bottomLine && aside.style.position == 'fixed') {
aside.style.top = 'unset';
aside.style.bottom = 0;
aside.style.position = 'absolute';
}
if (scrT < bottomLine && aside.style.top == '0px' && aside.style.position == 'fixed') {
aside.style.top = sideT - topLine + aside.parentNode.offsetTop + 'px';
aside.style.bottom = 'unset';
aside.style.position = 'absolute';
}
} else {
if (scrT <= sideT && scrT > topLine && aside.style.position != 'fixed') {
aside.style.top = 0;
aside.style.bottom = 'unset';
aside.style.position = 'fixed';
}
if (scrT <= topLine && aside.style.position == 'fixed') {
aside.style.top = 'unset';
aside.style.bottom = 'unset';
aside.style.position = 'absolute';
}
if (scrT > topLine && aside.style.bottom == '0px' && aside.style.position == 'fixed') {
aside.style.top = sideT - topLine + aside.parentNode.offsetTop + 'px';
aside.style.bottom = 'unset';
aside.style.position = 'absolute';
}
}
} else {
bottomLine = topLine + article.offsetHeight - sideH;
if (dir == "down") {
if (scrT >= topLine && scrT < bottomLine && aside.style.position != 'fixed') {
aside.style.top = 0;
aside.style.position = 'fixed';
}
if (scrT >= bottomLine && aside.style.position == 'fixed') {
aside.style.top = 'unset';
aside.style.bottom = 0;
aside.style.position = 'absolute';
}
} else {
if (scrT >= topLine && scrT < bottomLine && aside.style.position != 'fixed') {
aside.style.bottom = 'unset';
aside.style.top = 0;
aside.style.position = 'fixed';
}
if (scrT <= topLine && aside.style.position == 'fixed') {
aside.style.top = 'unset';
aside.style.position = 'absolute';
}
}
}
});
}
}
}
각각 일반적인 html 편집 방법으로 스타일과 스크립트 적용!
관련 글!!
'웹 코딩 > 티스토리' 카테고리의 다른 글
북클럽 스킨 - 메뉴 확장 (5) | 2020.09.18 |
---|---|
이미지 클릭 시 다른 이미지 보여주기 (3) | 2020.09.17 |
Odyssey 오디세이 스킨 - 사이드 바 위치변경 (9) | 2020.09.15 |
Odyssey 오디세이 스킨 - 상단 메뉴 고정 (11) | 2020.09.15 |
사이드 바 - 스크롤 따라 다니게 만들기 (2) | 2020.09.11 |
댓글