고정된내용이 특정위치부터는 스크롤되도록

고정된내용이 특정위치부터는 스크롤되도록

QA

고정된내용이 특정위치부터는 스크롤되도록

본문

특정 div가 고정으로 있다가

특정위치를 지나면 고정이 해제되고 같이 스크롤되도록 하려면

어떻게 해야할까요? ㅠㅠ

 

예를 들면

https://webisfree.com/2014-08-20/[html-css]-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EB%B0%8F-%EB%A7%81%ED%81%AC%EC%97%90-%EB%B0%91%EC%A4%84-%ED%91%9C%EC%8B%9C-%EB%B0%8F-%EB%A7%88%EC%9A%B0%EC%8A%A4%EB%A5%BC-%EC%98%AC%EB%A6%B4-%EA%B2%BD%EC%9A%B0-%EB%B0%91%EC%A4%84

 

우측에 광고배너가 스크롤을 내리면 고정이었다가

가장하단부분까지 내려가면 그때부터는 고정이 해제되고 다시 스크롤이 되는데

이렇게 구현하려면 어떻게 해야할까요 ㅠㅠ

 

 

하단부터 몇 px이 아닌 원하는 위치부터 스크롤이 가능하게끔.. 

이 질문에 댓글 쓰기 :

답변 1


<div class="test_banner">123123</div>

<style>
.test_banner {    
    top: 0; 
    z-index: 999; 
    width:200px;
    height: 45px; 
    background:#fff;
    margin: 0 auto; 
    padding: 0 10px; 
    box-sizing: border-box; 
} 
.fixinner{ 
    position:fixed;     
}
</style>
 
<script>
  $(window).scroll(function(){ 
    var height = $(document).scrollTop(); //실시간으로 스크롤의 높이를 측정
    if(height > 0){ 
      $('.test_banner').addClass('fixinner'); 
    }else if(height == 0){ 
      $('.test_banner').removeClass('fixinner'); 
    } 
  });
</script>

 

스크롤이 생겼을때 window의 높이가 0이면 fixed css속성을 추가되고

다시 height가 0 되면 fixed 속성을 제거

 

script의 height > 0 과 height == 0 부분을 잘 조정해보시고

고정 되는 위치 부분은 위에 css fixinner에 top 등을 추가해서 위치를 조정

해보시면 되실겁니다. 

 

실제 테스트 해 본 소스니까 잘 되실꺼예요~

 

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

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