fixed 되어있는 aside를 지정된 값의 스크롤에 도착하면 fixed를 없앨 수 있는 방법이 있나요?
본문
제이쿼리 및 자바 스크립트 시작한지 일주일된 코딩 초보입니다.
해당 문제를 어떻게 해결해야할지 모르겠네요
aside에 class 지정해서 position:fixed주고 보이게 하려고 z-index도 줬는데
지정된 스크롤 값(ex:2000px)에 도착하면 fixed를 풀던가 아니면 위로 올라가도록 하고 싶은데
어떻게 해야하나요?
아니면 아래 바디 처럼 button을 누르면 fixed 되어있는 구역을 멈추게 하고싶은데 어떻게 해야하나요
<aside class="side2">
<button>Stop</button>
</aside>
-body
.side2{
width:871px;
height:2330px;
top:130px;
position:fixed;
right:90px;
z-index:998;
background:#fff;
}
button{
float:right;
position:absolute;
top:649px;
right:225px;
width:60px;
height:30px;
}
-css
답변 3
예전에 제이쿼리로 직접만든 소스입니다.
스크롤시 헤더와 푸터의 높이를 구하여, 스크롤의 위치가 헤더/바디/푸터 영역에 따라 top or bottom 값이 변경되게 하였습니다.
이 소스대로 그대로 하시면 안되고 각각 선택자를 상황에 알맞게 바꿔주셔야 사용하실 수 있습니다.
<style>
#aside {
position: fixed;
min-width: 100px;
right: 0;
z-index: 10000;
box-sizing: border-box;
top: 130px;
}
</style>
<div id="aside">
aside 영역
</div>
<script>
var hd_height = $("#hd").height(); //헤더의 높이를 구합니다.
$(document).scroll(function(){ //페이지내에서 스크롤이 시작되면
curSc = $(document).scrollTop() + $(window).height(); //현재 스크롤의 위치입니다.
body_height = $("body").height(); //body의 높이를 구합니다.
footer_height = $("#footer").height(); // 푸터의 높이를 구합니다.
bottom_top = body_height - footer_height; //푸터를 제외한 body의 길이를 구합니다.
if(curSc > bottom_top + 20){ // 현재 스크롤의 높이가 body_top 보다 크다면 (하단 영역에 도착했다면) *20 은 적당히 조절해주시면 됩니다.
$("#aside").css('top', 'auto'); //fixed top 성질을 없애고
$("#aside").css('bottom', curSc - bottom_top + 100); //fixed bottom 을 줍니다.
}else{
$("#aside").css('top', hd_height); // 그렇지않으면 상단에 고정되게 합니다.
}
})
</script>
감사합니다. 해봤는데 잘모르겠어서 깔끔하게 포기하고 디자인 수정중입니다. 감사합니다........
javascirpt 로 처리해야함
1. 해당 페이지 총 height 변수생성
2. 스크롤 할때마다 화면의 position top 값 변수생성
3. 스크롤시마다 높이체크해가면서 적정 높이에 클래스추가해서 css로 숨김
검색하면 넘치는것들이라 한번 검색해보셔요
