스크롤 내릴시 나오는 메뉴

스크롤 내릴시 나오는 메뉴

QA

스크롤 내릴시 나오는 메뉴

본문

안녕하세요 문의좀 드리겠습니다.

제이쿼리 명칭을 잘몰라서

 

혹시 만약 TOP에서 50PX 을 지정하고 5PX 지나야지만 헤더를 보이게 하는 소스 아시는분계실까요?

50PX 전에는 아예 안보였다가50PX 스크롤을 지나야지만 나타나는 제이쿼리를 찾고있습니다.

 

https://sir.kr/qa/336721?s_tag=%EA%B7%B8%EB%88%84%EB%B3%B4%EB%93%9C5
 

위와같이 적용했는데 왜안될까요 ㅠ?


 
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
 
<STYLE>    
.inner {    
    top: 0; 
    z-index: 999; 
    width: 100%; 
    min-width: 1000px; 
    margin: 0 auto; 
    background-color: white; 
    padding: 0 10px; 
    height: 45px; 
    box-sizing: border-box; 
} 
.fixinner{ 
    position:fixed; 
}
</style>
<script>
/*스크롤 생기면 메뉴 fixed*/ 
 jqeury
  $(window).scroll(function(){ 
    var height = $(document).scrollTop(); //실시간으로 스크롤의 높이를 측정
    if(height > 50px){ 
      $('#header .inner').addClass('fixinner'); 
    }else if(height == 50px){ 
      $('#header .inner').removeClass('fixinner'); 
    } 
  });
  </script>
</head>
<body>
 
<div class="inner">111
</div>

 
 

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

이 질문에 댓글 쓰기 :

답변 6

https://codepen.io/CoMeangKim/pen/NWPjYde

 

참고해보세요

제가 오타가 있었습니다.

 

$('.inner').addClass('fixinner');

에 . 을 넣었네요..;;

 

위 소스가 전부라면 제이쿼리는 안불러오는건가요..?

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

제이쿼리 문에 선택자 경로가 틀린거 같습니다.

html은 .inner만 작업하셧고

제이쿼리문은 #header가 들어가 있네요

<script>
/*스크롤 생기면 메뉴 fixed*/
 jqeury
  $(window).scroll(function(){
    var height = $(document).scrollTop(); //실시간으로 스크롤의 높이를 측정
    if(height > 50px){
      $('.inner').addClass('.fixinner');
    }else if(height == 50px){
      $('.inner').removeClass('.fixinner');
    }
  });
  </script>

이렇게해도 안되나요


$(window).scroll(function(){
        var height = 0;
        height=$(window).scrollTop();
        if (height >= 50)
        {
            $('.inner').addClass('.fixinner');
        }else{
            $('.inner').removeClass('.fixinner');
        }
    });

이렇게도 한번 해보셔요

css에서

.inner{position:fixed;top:-50px} //해당 컨텐츠 높이만큼

.fixinner{top:0}

수정해보셔요

<STYLE>
 

.inner{position:fixed;top:-50px} //해당 컨텐츠 높이만큼

.fixinner{top:0}
</style>
<script>
$(window).scroll(function(){
        var height = 0;
        height=$(window).scrollTop();
        if (height >= 50)
        {
            $('.inner').addClass('.fixinner');
        }else{
            $('.inner').removeClass('.fixinner');
        }
    });
  </script>
</head>
<body>
 

<div class="inner">111111111111111111111111111111
</div>





이렇게 해도 바응이 없습니다. ㅜㅜ

코드문제가 아닌 다른 문제 있는것 같네요 

test.php

에서

<!DOCTYPE html>
<html lang= "ko">
<head>
<meta charset="utf-8">
<title>제목</title>
</head>
<STYLE>
.inner{position:fixed;top:-50px;}
.fixinner{top:0;}
</style>
<body>
<div class="inner">111111111111111111111111111111
</div>

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>

<script>
$(window).scroll(function(){
        var height = 0;
        height=$(window).scrollTop();
        if (height >= 50)
        {
            $('.inner').addClass('.fixinner');
        }else{
            $('.inner').removeClass('.fixinner');
        }
    });
  </script>

이렇게 적용한게 다입니다 ㅠㅠ 왜안될까요

제가 사용하는 것인데... 참고바랍니다.

 


<!----- 상단메뉴 고정 --->
<style type="text/css">
/* 초기화 */
* {margin: 0px;padding: 0px; }
/* 타이틀 */
.title {text-align: center;height:100px;line-height:100px;}
/* 메뉴 */
.menu {text-align: center;background-color: #ffffff;padding: 0px 0px;width: 100%;filter:alpha(opacity=100); opacity:1.0; -moz-opacity:1.0; }
/* 본문 */
.content {height: 160px; }
/* 고정 */
.fixed {position: fixed;top: 10px;}
</style>
 
<script language="javascript">
$(document).ready(function() {
var menu = $( '.menu' ).offset();
   $( window ).scroll( function() {
     if ( $( document ).scrollTop() > menu.top ) {
    $( '.menu' ).addClass( 'fixed' );
       } else {
    $( '.menu' ).removeClass( 'fixed' );
       }
   });
});
</script>
<!--- 상단메뉴 고정 ---->

<div class="menu">111
</div>
 

답변을 작성하시기 전에 로그인 해주세요.
전체 0
QA 내용 검색
filter #php ×
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT