메뉴바 최상단 고정 응용

이 기능을 동작하도록 만드는 것은 사실 모바일에서 흔하게 쓰는 top으로 가는 버튼을 동작시킬때 쓰는 방법과 100% 동일한 방법입니다. 상단으로 가는 버튼을 만들때 쓰는 기법이 특정위치까지 스크롤이 내려오면 top 버튼이 노출되게 스크립트를 사용하는 것인데 그 스크립트를 그대로 사용했습니다.

 

 

 

게시판스킨의 read.html 파일에 아래 스크립트를 상단에 추가해 줍니다.

 

<script>
jQuery(function($){
$(".btTop_head").hide();
$(window).scroll(function () {
  if($(window).scrollTop() > 100) {
   $('.btTop_head').show();
  } else {
   $('.btTop_head').hide();
  }
 });
});
</script>

 

 

CSS파일에 추가합니다.

.btTop_head    {display: block; position: fixed; top:0px; z-index: 150;height:50px;background-color:#fff;border-bottom:1px solid #eaeaea;width: 100%;}

 

 

 

그리고 노출시키고 싶은 내용을  btTop_head 클래스를 사용한 div 박스에 작성합니다.

 

<div class="btTop_head" style="display:none;">

상단에 표현하고 싶은 각종 내용들

</div>