고정된내용이 특정위치부터는 스크롤되도록
본문
특정 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 등을 추가해서 위치를 조정
해보시면 되실겁니다.
실제 테스트 해 본 소스니까 잘 되실꺼예요~
답변을 작성하시기 전에 로그인 해주세요.