[JS] OverLayer + Scroll
<script type="text/javascript">
jQuery( document ).ready(function(){
jQuery("#layerMainWrap").fadeOut(1500, "linear");
jQuery("#btnLayerMain").hover(function(){
jQuery("#layerMainWrap").fadeIn("Fast");
});
jQuery("#btnLayerMain").mouseout(function(){
jQuery("#layerMainWrap").hide();
jQuery("#layerMainWrap").mouseover(function(){
jQuery("#layerMainWrap").show();
});
});
$(window).scroll(function(){
if ($(window).scrollTop() >= 159){
jQuery("#layerMainCon").css("position" , "fixed");
jQuery("#layerMainCon").css("top" , "40px");
}else if ($(window).scrollTop() <= 159){
jQuery("#layerMainCon").css("position" , "absolute");
jQuery("#layerMainCon").css("top" , "0");
}
});
});
</script>
<style style="text/css">
.layerMainWrap{
position:absolute;
top:0;left:-627px;
z-index:999;
width:627px;
overflow:hidden;
}
.layerMainWrap .layerBox{
position:relative;
float:right;
}
.layerMainWrap .layerBox .iconArrow{position:absolute;top:17px;right:3px;}
.layerMainWrap .layerBox .layerInfo{
position:relative;
margin-right:10px;
border:2px solid #4e4b47;
}
</style>
<a href="#" id="btnLayerMain"><img src="#" alt="" /></a>
<div class="layerMainWrap" id="layerMainWrap">
<div id="layerMainCon">
<div class="layerBox">
<div class="layerInfo">
<img src="#" alt="" />
</div>
<span class="iconArrow"><img src="#" alt="" /></span>
</div>
</div>
</div>
scroll 부분은 검색해서 금방 했는데
의외로 hover 부분에서 뭔가 최적화를 시키고 싶은 맘에 덤비다가 그냥 끝냄'';
하...항상 여기서 나의 자스 인생은 끝나는가...언제 또 보지...
이넘의 공부는
댓글
댓글 쓰기