[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 부분에서 뭔가 최적화를 시키고 싶은 맘에 덤비다가 그냥 끝냄'';

하...항상 여기서 나의 자스 인생은 끝나는가...언제 또 보지...

이넘의 공부는

댓글

이 블로그의 인기 게시물

[iOS] body 스크롤 막기

[html] 모바일웹 작업 팁 정리중...

Swiper lazyLoading