jQuery 특정 위치에서 요소 고정 오류
본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.inner {
max-width: 1500px;
margin: 0 auto;
}
section {
height: 100vh;
}
#box1,#box3{
background: salmon;
}
#box2 {
background: sandybrown;
}
header {
background: skyblue;
padding: 0 10rem;
height: 55px;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
width: 100%;
}
header .gnb {
display: flex;
justify-content: space-between;
width: 400px;
}
.ec-base-tab ul {
display: flex;
font-size: var(--normal-font);
line-height: 14px;
word-break: break-all;
width: 500px;
}
.ec-base-tab ul.fixed {
position: fixed; top: 55px; left: 0; z-index: 9999;
}
.ec-base-tab ul li {
width: 25%;
text-align: center;
border: 1px solid #000;
border-right: none;
}
.ec-base-tab ul li:last-child {
border-right: 1px solid #000;
}
.ec-base-tab ul li a {
display: block;
padding: 10px;
color: inherit;
text-decoration: none;
}
</style>
</head>
<body>
<section id="box1">
<header>
<h1>header</h1>
<ul class="gnb">
<li>navi1</li>
<li>navi2</li>
<li>navi3</li>
<li>navi4</li>
</ul>
</header>
</section>
<section id="box2">
<div class="inner">
<div id="tabProduct" class="ec-base-tab" >
<ul>
<li class="selected"><a href="#prdDetail" target="_self">상세정보</a></li>
<li><a href="#prdInfo">구매안내</a></li>
<li><a href="#prdReview" name="use_review">상품후기</a></li>
<li><a href="#prdQnA" name="use_qna">Q&A</a></li>
</ul>
</div>
</div>
</section>
<section id="box3">
<div class="inner">
<div class="contentBox">
<p>content</p>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
const $tabProduct = $('#tabProduct ul');
$(document).ready(function(){
$(window).scroll(function(){
const $scrollTop = $(window).scrollTop();
const $tabProductHeight = $('#tabProduct ul').offset().top;
if($scrollTop >=$tabProductHeight) {
$tabProduct.addClass('fixed');
} else {
$tabProduct.removeClass('fixed');
}
})
});
</script>
</body>
</html>
#tabProduct ul 이 친구의 머리에 닿았을때 헤더와 함께 자연스럽게 고정되었으면 좋겠는데
계속 깜빡거리네요,,,,,
답변 1
$(window).scroll(function(){
const $hdheight = $("header").height();
const $scrollTop = $(window).scrollTop();
const $tabProductHeight = $('#tabProduct ul').offset().top;
if(!$tabProduct.hasClass("fixed")){
if($scrollTop >=$tabProductHeight) {
$tabProduct.addClass('fixed');
}
} else {
if($scrollTop <= $hdheight) {
$tabProduct.removeClass('fixed');
}
}
})
이걸로 해보세요
안되네요,,
아 되네요!!! const $tabProduct = $('#tabProduct ul'); 이게 없었네요 감사합니다
넵 스크롤 부분만 수정부분 알려드린거라서.. 다행입니다.
저기혹시.. 댓글 다실진 모르겠지만 다시 댓글 달아봅니다 if(!$tabProduct.hasClass("fixed")) if문 젤 앞에 이렇게 대전제를 깐건 getter 개념인가요?
초기 데이터를 불러오는거요! 아무리 생각해도 초반에 이렇게 대전제를 깔아야하는 이유를 모르겠더라고요 디폴트가 원래(당연히) fixed를 가지고 있지 않는 상태인걸 컴퓨터에게 알려줘야하는건가요?
1. 위 코드는 스크롤을 할때 마다 remove와 add를 계산하기 때문에 깜빡이게 됩니다.
2. 그래서 제가 주어드린 코드는 if문을 추가로 감쌈으로 조건이 맞을때 마다 add와 remove를 실행하므로 깜빡이지 않습니다.
3. header height 값을 주는 이유는 고정되어 있을 경우에는 offset().top = $(window).scrollTop() 이 되기 때문에 다른 옵셋 값으로 대체를 합니다.
const $tabProduct = $('#tabProduct ul');
$(document).ready(function(){
$(window).scroll(function(){
const $hdheight = $("header").height();
const $scrollTop = $(window).scrollTop();
const $tabProductHeight = $('#tabProduct ul').offset().top;
if($scrollTop >=$tabProductHeight) {
$tabProduct.addClass('fixed');
}
else if($scrollTop <= $hdheight) {
$tabProduct.removeClass('fixed');
}
})
});
이렇게 해도 되긴하는데 그냥 안전 장치라고 생각 하시면 되실겁니다.
정말 감사합니다,,