KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

스크롤 내릴시 나오는 메뉴

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
KCP 이벤트!
스크롤 내릴시 나오는 메뉴

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

채택됨

김영9님의 답변

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

 

참고해보세요

제가 오타가 있었습니다.

 

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

에 . 을 넣었네요..;;

 

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

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

주소복사
채택됨
답변의 댓글

김영9님의 답변

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

html은 .inner만 작업하셧고

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

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

이렇게해도 안되나요

김영9님의 답변


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

이렇게도 한번 해보셔요

주소복사
답변의 댓글

김영9님의 답변

css에서

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

.fixinner{top:0}

수정해보셔요

주소복사
답변의 댓글
minsin님의 댓글
<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>





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

김영9님의 답변

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

주소복사
답변의 댓글
minsin님의 댓글
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>
 

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 92,545 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

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

© SIRSOFT