SIR
이전 목록 다음

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

돌돌쇠주먹밥
프로필 보기이 회원 글보기이 회원의 댓글보기
 6년 전 2,750

특정 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개

ifelse
프로필 보기이 회원 글보기이 회원의 댓글보기
 6년 전

Copy 
<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 등을 추가해서 위치를 조정

해보시면 되실겁니다. 

 

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

 

답변을 작성하려면 로그인이 필요합니다.

🐛 버그신고