자바 sticky 함수 관련하여 질문드려요~ 채택완료
랑기랑기
7년 전
조회 3,398
구글링하여 저에게 적합한 함수를 찾았는데요..! [아래 함수 확인부탁드려요]
여기서 궁금한점이 아래 함수대로 적용시에 스크롤을 내렸을 경우
로고가 원본사이즈에서 width와 height를 작게 하는방식인데요..!
제가 여기서 질문드리는 부분이 부분에서
로고1(큰이미지)
로고2(작은이미지) 로 기본적으로는 로고1이미지가 나왔다가
스크롤할경우에는 로고2 이미지로 변경처리하고 싶어서요..!
로고1 이미지와 로고2 이미지의 경우에는 미리 로고를 만들었다고 가정하에
자바스크립트 함수중에 어디를 수정해야 할까요?!
HTML 부분이구요
</p>
<p><section>
<header>
<nav id="header_nav">
<ul>
<li>Home</li>
<li>Photography</li>
<li>Design</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<div ><a href="#"><img id ="logo" src="<a href="http://www.redcartstudios.com/whitefireworksparade/wp-content/uploads/2013/09/redcart_logo.jpg"></a></div>" target="_blank" rel="noopener noreferrer">http://www.redcartstudios.com/whitefireworksparade/wp-content/uploads/2013/09/redcart_logo.jpg"></a></div></a>
</header>
</section>
<section class="main">
cdsccyxcyc
yc
yx
cyx
cyx yx c
yxc y
c ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
c ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yxc ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yc ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yx cydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
c ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yxc ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
cy ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
cx yydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
c ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
c ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yxc ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yc ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yx cydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
c ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yxc ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
cy ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
cx yydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
c ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yxc ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yc ydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
yx cydsfsf sdf sdf sdf f dsdfdsdfdf fdsfdfsdfdrg trzhrth fthrth
</section></p>
<p> </p>
<p>
CSS부분이고요
</p>
<p>*{margin:0;padding:0;}</p>
<p>body {
background: #888;
font-family: arial;
}</p>
<p>section {
background: #fff;
box-shadow: 0px 2px 2px #ebebeb;
}</p>
<p>header {
width: 100%;
text-align: center;
position: fixed;
top:0;
background:white;
}</p>
<p>nav {
margin-bottom:50px;
width:960px;
margin:0 auto;
position:relative;
}</p>
<p>ul {
width:1000px;
margin:0 auto;
}</p>
<p>nav li{
width:110px;
display: inline-block;
padding: 20px 30px 20px 0;
&:first-child {
padding-left:0;
margin-left:0;
}
&:nth-child(3) {
padding-right: 80px;
}
&:nth-child(4) {
padding-left: 80px;
}
&:last-child {
padding-right:0;
}
}</p>
<p>#logo {
width: 100px;
height: 100px;
position: absolute;
top: 5px;
left: 50%;
margin:0 0 0 -40px;
}</p>
<p>.main {
max-width:960px;
margin:120px auto 0 auto;
padding:10px;
p, img {
margin:0 0 1em 0;
}
}
</p>
<p>
자바스크립트부분이예요~
</p>
<p>$(function(){
$('#logo').data('size','big');
});</p>
<p>$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('#logo').data('size') == 'big')
{
$('#logo').data('size','small');
$('#logo').stop().animate({
width:'50px',
height:'50px',
marginLeft:'-20px'
},600);
}
}
else
{
if($('#logo').data('size') == 'small')
{
$('#logo').data('size','big');
$('#logo').stop().animate({
width:'100px',
height:'100px',
marginLeft:'-40px'
},600);
}
}
});</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
7년 전
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
랑기랑기
7년 전
�
플래토
7년 전
@랑기랑기
이미지 URL로 src값을 치환하시면됩니다만..
이미지 URL로 src값을 치환하시면됩니다만..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
제가 궁금한 부분의 경우에는
[logo_1번] [logo_2번]를 미리 만들어서
기존 스크롤 하지않을경우에는 [logo_1번]이 나오지만
아래로 스크롤할경우에는 [logo_2번]으로 이미지가 변경되는걸 원해서요~!