안녕하세요 상단 메뉴 고정 스크립트 관련 질문 드립니다.

꿈의세계 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2018.09.18 14:12:06 1921 (121.♡.♡.166)

답변 2

본문

안녕하세요 현제 메뉴를 만들고 있는데요

상단 고정 메뉴를 만들고 싶은데요 스크립틀 보니 잘 몰라서요 혹시 아시는 분은 알려 주실 수 있으신지 해서요

어덯게 대입을 해야 할지 잘 몰라서요

죄송합니다. 초보라서.....

html 코드 이구요


<header id="header" class="sub_head">   
  <!-- 로고 -->
 <h1 class="logo"><a href="/"><img src="<?php echo $sw_skin_url?>/img/top_logo.png" alt="테스트용메뉴" /></a></h1>
 <!-- //로고 -->
 <!-- pc_메뉴시작 -->
 <div id="pc_menu">
  <div class="in_pc">
   <ul class='main_menu'>
    <li><a href="<?php echo G5_URL;?>/page/page.1-1.php">교회안내</a></li>
    <li><a href="<?php echo G5_URL;?>/page/page.2-1.php">기 관</a></li>
    <li><a href="<?php echo G5_URL;?>/page/page.3-2.php">사 역 · 기 관</a></li>
    <li><a href="<?php echo G5_URL;?>/page/page.4-1.php">교 육</a></li>
    <li><a href="<?php echo G5_URL;?>/page/page.5-1.php">찬 양</a></li>
    <li><a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=6010">커뮤니티</a></li>
    <li><a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=7010">인터넷방송</a></li>
   </ul>  
  </div>
  <!-- 2뎁스슬라이드메뉴 -->
  <div id="menu_dept">
   <div class="in_dept">
    <ul class='menu_dept_ul'>
     <li>
      <div id='menu_1' class='menu_open' >
       <ul class='sub_menu'>
        <li><a href="<?php echo G5_URL;?>/page/page.1-1.php">교회안내</a></li>
        <li><a href="<?php echo G5_URL;?>/page/page.1-2.php">인사말씀</a></li>
        <li><a href="<?php echo G5_URL;?>/page/page.1-3.php">연혁</a></li>
        <li><a href="<?php echo G5_URL;?>/page/page.1-4.php">행정업무</a></li>
        <li><a href="<?php echo G5_URL;?>/page/page.1-5.php">예배안내</a></li>
        <li><a href="<?php echo G5_URL;?>/page/page.1-6.php">오시는 길</a></li>
        <li><a href="<?php echo G5_URL;?>/page/page.1-7.php">교회시설</a></li>
       </ul>
      </div> 
     </li>
</ul> 
   </div>
  </div>  
  <!-- 2뎁스슬라이드메뉴끝 -->    
 </div>
 <!-- pc_메뉴끝 -->
</header>
<!-- //sub_header -->

스크립트 코드 입니다.


<script type='text/javascript'>
$(window).scroll(function(e){
 topmenu_show($(this),e); //스크롤시 상단메뉴 sticky
});
$(window).resize(function(e){
 topmenu_show($(this),e); //리사이즈시 상단메뉴 sticky
});
$(document).ready(function(){
 $(document).on({
  "mouseenter":function(){
   $(this).find("ul").show().stop().css({"right":"-10px","opacity":0}).animate({
    "right":0,
    "opacity":1
   },300,"Power3.easeOut");
  },
  "mouseleave":function(){
   $(this).find("ul").stop().animate({
    "right":"-10px",
    "opacity":0
   },300,"Power3.easeOut",function(){
    $(this).hide();
   });
  }
 },".pc_menu .in_dept");
 //상단 메뉴 검색버튼 클릭시 검색어 입력창 보임
 $(document).on("click",".tm_sch",function(){
  if($(".search_box").is(":visible")){
   $(".search_box").stop().animate({
    "bottom":"50px",
    "opacity":0
   },{
    "duration":300,
    "easing":"Power3.easeOut",
    complete:function(){
     $(this).css({"display":"none"});
    }
   });
  }else{
   $(".search_box").css({"display":"block","opacity":"0","bottom":"0"}).stop().animate({
    "bottom":"-52px",
    "opacity":1
   },{
    "duration":300,
    "easing":"Power3.easeOut"
   });
  }
 });
 
 //검색어 입력창외 다른 영역 클릭시 입력창 숨김
 $(document).on("mouseup",function(e){
  var elm=$(".search_box");
  if(elm.has(e.target).length===0 && !$(e.target).hasClass("fa") && !$(e.target).hasClass("tm_sch")){
   $(".search_box").stop().animate({
    "bottom":"0",
    "opacity":0
   },{
    "duration":300,
    "easing":"Power3.easeOut",
    complete:function(){
     $(this).css({"display":"none"});
    }
   });
  }
 });
});
//상단메뉴 위치선정 및 스크롤시 sticky 적용 - 애니메이션
function topmenu_show(top_obj,e){
 var sc_top=top_obj.scrollTop();
 var obj=$("#header");
 var ap=0.7;
 
 var sbtom=0;
 if($(".pc_menu").length){
  sbtom=$(".pc_menu").outerHeight();
 }
 if(sc_top>=Number($(".pc_menu").outerHeight())){
  obj.addClass("topmenu-fixed");
 }else{
  obj.removeClass("topmenu-fixed");
 }
}
</script>