여전히 멍청하지만 천천히 가고 있습니다. 일련의 div, 모두 동일한 클래스가 있고 클릭하면 다음 또는 이전 div의 맨 위로 스크롤되는 이전 및 다음 버튼이 있습니다. 내 헤더가 그 아래로 스크롤되는 div를 숨기지 않도록 오프셋을 설정하고 싶습니다. 어떻게해야할지 모르겠습니다. 아래 코드.
<button class="prev link js-prev js-scroll-to">Previous</button>
<button class="next link js-next">Next</button>
<script>
$('.js-scroll-to').click(function(e) {
target = $($(this).attr('href'));
if (target.offset()) {
$('html, body').animate({scrollTop: target.offset().top + 'px'}, 1000);
}
e.preventDefault();
});
$('.js-next').click(function(e) {
var selected = $(".js-list-item.js-current-panel");
var anchors = $(".js-list-item");
var pos = anchors.index(selected);
var next = anchors.get(pos+1);
var prev = anchors.get(pos-1);
target = $(next);
$(selected).removeClass("js-current-panel");
$(next).addClass("js-current-panel");
if (target.offset()) {
$('html, body').animate({scrollTop: target.offset().top + 'px'}, 1000);
}
e.preventDefault();
});
$('.js-prev').click(function(e) {
var selected = $(".js-list-item.js-current-panel");
var anchors = $(".js-list-item");
var pos = anchors.index(selected);
var next = anchors.get(pos+1);
var prev = anchors.get(pos-1);
target = $(prev);
$(selected).removeClass("js-current-panel");
$(prev).addClass("js-current-panel");
if (target.offset()) {
$('html, body').animate({scrollTop: target.offset().top + 'px'}, 1000);
}
e.preventDefault();
});
</script>
귀하의 경우에는 애니메이션 스크롤 코드에 바로 오프셋을 추가 할 수 있다고 생각합니다 (탐색 막대의 높이와 약간의 여백을 뺀 값).
$('html, body').animate({scrollTop: target.offset().top - 54 + 'px'}, 1000);
일반적으로 div 자체에 고정하는 대신 앵커로 사용할 span 클래스를 추가하여 JS 스크롤없이이 작업을 수행합니다. 누군가가 앵커 포인트에 직접 링크하는 경우에도 작동합니다.
이렇게하면 앵커의 상대 위치를 사용하여 탐색 모음의 높이에 대한 오프셋을 설정할 수 있습니다.
이 경우 다음과 같은 div가있을 것입니다.
<div class="js-list-item js-current-panel">
content
</div><div class="js-list-item">
content
</div><div class="js-list-item">
content
</div>
다음과 같이 변경하겠습니다.
<span class="anchor js-list-item js-current-panel"></span>
<div class="content">
content
<span class="anchor js-list-item"></span>
</div><div class="content">
content
<span class="anchor js-list-item"></span>
</div><div class="content">
content
</div>
일부 CSS를 사용하여 새 앵커를 배치합니다 (상단은 탐색 모음 높이에 따라 다름).
.anchor {
position: relative;
top: -54px;
}
앵커 위치를 보여주는 추가 CSS 예제 :
<style type="text/css">
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 44px;
background: black;
}
.main {
margin-top: 54px;
}
.js-list-item {
display: inline-block;
width: 5px;
height: 5px;
background: blue;
position: relative;
top: -54px;
}
.content {
background: red;
width: 100%;
height: 500px;
margin-bottom: 25px;
}
</style>
<div class="nav">
<button class="prev link js-prev js-scroll-to">Previous</button>
<button class="next link js-next">Next</button>
</div>
<div class="main">
<span class="js-list-item js-current-panel"></span>
<div id="one" class="content"></div>
<span class="js-list-item"></span>
<div id="two" class="content"></div>
<span class="js-list-item"></span>
<div id="three" class="content"></div>
<span class="js-list-item"></span>
<div id="four" class="content"></div>
<span class="js-list-item"></span>
<div id="five" class="content"></div>
<span class="js-list-item"></span>
<div id="six" class="content"></div>
<span class="js-list-item"></span>
<div id="seven" class="content"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$('.js-scroll-to').click(function(e) {
target = $($(this).attr('href'));
if (target.offset()) {
$('html, body').animate({scrollTop: target.offset().top + 'px'}, 1000);
}
e.preventDefault();
});
$('.js-next').click(function(e) {
var selected = $(".js-list-item.js-current-panel");
var anchors = $(".js-list-item");
var pos = anchors.index(selected);
var next = anchors.get(pos+1);
var prev = anchors.get(pos-1);
target = $(next);
$(selected).removeClass("js-current-panel");
$(next).addClass("js-current-panel");
if (target.offset()) {
$('html, body').animate({scrollTop: target.offset().top + 'px'}, 1000);
}
e.preventDefault();
});
$('.js-prev').click(function(e) {
var selected = $(".js-list-item.js-current-panel");
var anchors = $(".js-list-item");
var pos = anchors.index(selected);
var next = anchors.get(pos+1);
var prev = anchors.get(pos-1);
target = $(prev);
$(selected).removeClass("js-current-panel");
$(prev).addClass("js-current-panel");
if (target.offset()) {
$('html, body').animate({scrollTop: target.offset().top + 'px'}, 1000);
}
e.preventDefault();
});
</script>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다