스크롤에따라 반응하는 자바스크립트소스
본문
자바스크립트를 잘 몰라서 여기저기 검색하다가 짜집기했는데
크롬에서는 어찌어찌 성공이 되었습니다
스크롤을 내리면 헤더메뉴가 사라지고
스크롤을 올리면 헤더메뉴가 슬라이드되어 내려옵니다.
문제는 크롬에서는 구현이 되는데 익스에서 안된다는 것입니다 ㅠㅠ
제 생각에는 소스상태가 정상이 아닌 듯 한데....
언어를 잘 몰라서 뭘 건드려야할지 모르겠습니다 ㅠㅠ
고수님들 봐주시길 부탁드립니다...
<JS>
//header scroll motion
var lastScrollTopF = 0;
var deltaF = 5;
var fixBox = document.querySelector('.headerBack');
var fixBoxHeight = fixBox.offsetHeight;
var didScrollF;
window.onscroll = function(e) {
didScrollF = true;
};
setInterval(function(){
if(didScrollF){
hasScrolledF();
didScrollF = false;
}
}, 250);
function hasScrolledF(){
var nowScrollTopF = window.scrollY;
if(Math.abs(lastScrollTopF - nowScrollTopF) <= deltaF){
return;
}
if(nowScrollTopF > lastScrollTopF && nowScrollTopF > fixBoxHeight){
//Scroll down
fixBox.classList.remove('header-down');
fixBox.classList.add('header-up');
$(".headerGnbBack").css({"opacity":"0","transition":"0.5s"});
$(".headerGnb").css({"opacity":"0","transition":"0.5s"});
$(".headerLogo").css({"opacity":"0","transition":"0.5s"});
}else{
if(nowScrollTopF + window.innerHeight < document.body.offsetHeight){
//Scroll up
fixBox.classList.add('header-down');
fixBox.classList.remove('header-up');
$(".headerGnbBack").css({"opacity":"1","transition":"0.5s"});
$(".headerGnb").css({"opacity":"1","transition":"0.5s"});
$(".headerLogo").css({"opacity":"1","transition":"0.5s"});
}
}
lastScrollTopF = nowScrollTopF;
};
html
<div class="headerBack clearboth header-up">
<div class="headerLogo1">
<a href="#">logo</a>
</div>
<div class="headerGnbBack"></div>
<div class="headerGnb">
<ul class="headerGnb1dep clearboth">
<li><a href="#">메뉴</a>
<ul class="headerGnb2dep clearboth">
<li class="headerGnb2dep_li"><a href="#">인사말</a></li>
</ul>
</li>
<li><a href="#">메뉴</a>
<ul class="headerGnb2dep clearboth">
<li class="headerGnb2dep_li"><a href="#">인사말</a></li>
</ul>
</li>
<li><a href="/bbs/board.php?bo_table=mirnotice">메뉴</a>
<ul class="headerGnb2dep clearboth">
<li class="headerGnb2dep_li"><a href="/bbs/board.php?bo_table=mirnotice">인사말</a></li>
</ul>
</li>
</ul>
</div>
</div>
css
/*스크롤 헤더*/
.headerBack {
position: fixed;;
z-index: 130;
background: #fff;
width: 100%;
height:80px;
padding: 0 80px;
}
.headerLogo1 {
width: 46%;
float: left;
padding-top: 20px;
}
.headerLogo1 img {
width: 170px;
position: relative;
}
.headerGnb {
width: 45%;
float: left;
padding-top: 7px;
}
.headerGnb1dep {
width: 100%;
height: 100%;
}
.headerGnb1dep > li {
width: 25%;
float: left;
text-align: center;
}
.headerGnb1dep > li > a {
width: 100%;
display: block;
color: #000;
font-size: 16px;
padding: 25px 0;
font-weight: 500;
position: relative;
}
.headerGnb1dep > li > a::before {
display: block;
content: "";
width: 18px;
height: 18px;
background: #30f5ff;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
border-radius: 50%;
opacity: 0;
transition: all 0.3s;
}
.headerGnb1dep > li > a:hover::before {
display: block;
content: "";
width: 6px;
height: 6px;
background: #12a3e2;
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
border-radius: 50%;
opacity: 1;
transition: all 0.3s;
}
.headerGnb1dep > li > a.on::before {
display: block;
content: "";
width: 6px;
height: 6px;
background: #12a3e2;
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
border-radius: 50%;
opacity: 1;
transition: all 0.3s;
}
.headerGnb2dep {
padding-top: 27px;
display: none;
}
.headerGnb2dep > li {
width: 100%;
float: left;
}
.headerGnb2dep > li > a {
width: 100%;
display: block;
text-align: center;
color: #000;
font-size: 14px;
padding: 14px 0;
font-weight: 500;
}
.headerGnb2dep > li > a:hover {
color: #12a3e2;
}
.headerGnbBack {
display: none;
width: 100%;
height: 382px;
background: rgba(255,255,255,0.95);
position: absolute;
top: 79px;
z-index: -1;
left: 0;
border-top: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
box-shadow: 0px 5px 10px 3px rgba(0, 0, 0, 0.0.5);
}
답변 1
어차피 구문분석은 어려우실것 같아서
소스 한번 짜봤습니다.
<script type="text/javascript">
$(document).ready(function(){
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.대상클래스').outerHeight(); // 대상객체 height 계산
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight){
$(".대상클래스").slideUp();
} else {
if(st + $(window).height() < $(document).height()) {
$(".대상클래스").slideDown();
}
}
lastScrollTop = st;
}
});
</script>
대상 클래스는 fixed 속성 주시고 top:0 으로 붙여주셔야 정상 출력됩니다~
답변을 이제서야 봤네요! 직접 소스도 짜주시고 정말 감사합니다 ㅠㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.
