스크롤 내릴시 나오는 메뉴
본문
안녕하세요 문의좀 드리겠습니다.
제이쿼리 명칭을 잘몰라서
혹시 만약 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>
요곤 제가 찾는거랑 조금 다른거같습니다 ㅠㅠ
