jQuery 특정 위치에서 요소 고정 오류

jQuery 특정 위치에서 요소 고정 오류

QA

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');
                }
            }
        })

이걸로 해보세요

저기혹시.. 댓글 다실진 모르겠지만 다시 댓글 달아봅니다 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');
            }

        })
    });

이렇게 해도 되긴하는데 그냥 안전 장치라고 생각 하시면 되실겁니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT