크롬80버전 결제 이슈, 영카트5 주요패치 확인!

스크롤 내릴시 나오는 메뉴

컨텐츠몰 10% 할인
그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
스크롤 내릴시 나오는 메뉴

QA

가정의 달 맞이 SIR 컨텐츠몰 10% 특별할인 - 코로나19 바이러스로 어려운 시기, SIR이 함께 하겠습니다.

스크롤 내릴시 나오는 메뉴

본문

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

제이쿼리 명칭을 잘몰라서

 

혹시 만약 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>
 

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

회원로그인

진행중 포인트경매

  1. 참여0 회 시작20.05.27 19:24 종료20.06.01 19:24

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT