자바 sticky 함수 관련하여 질문드려요~
본문
구글링하여 저에게 적합한 함수를 찾았는데요..! [아래 함수 확인부탁드려요]
여기서 궁금한점이 아래 함수대로 적용시에 스크롤을 내렸을 경우
로고가 원본사이즈에서 width와 height를 작게 하는방식인데요..!
제가 여기서 질문드리는 부분이 <img src="">부분에서
로고1(큰이미지)
로고2(작은이미지) 로 기본적으로는 로고1이미지가 나왔다가
스크롤할경우에는 로고2 이미지로 변경처리하고 싶어서요..!
로고1 이미지와 로고2 이미지의 경우에는 미리 로고를 만들었다고 가정하에
자바스크립트 함수중에 어디를 수정해야 할까요?!
HTML 부분이구요
<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="http://www.redcartstudios.com/whitefireworksparade/wp-content/uploads/2013/09/redcart_logo.jpg"></a></div>
</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>
CSS부분이고요
*{margin:0;padding:0;}
body {
background: #888;
font-family: arial;
}
section {
background: #fff;
box-shadow: 0px 2px 2px #ebebeb;
}
header {
width: 100%;
text-align: center;
position: fixed;
top:0;
background:white;
}
nav {
margin-bottom:50px;
width:960px;
margin:0 auto;
position:relative;
}
ul {
width:1000px;
margin:0 auto;
}
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;
}
}
#logo {
width: 100px;
height: 100px;
position: absolute;
top: 5px;
left: 50%;
margin:0 0 0 -40px;
}
.main {
max-width:960px;
margin:120px auto 0 auto;
padding:10px;
p, img {
margin:0 0 1em 0;
}
}
자바스크립트부분이예요~
$(function(){
$('#logo').data('size','big');
});
$(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);
}
}
});
답변을 작성하시기 전에 로그인 해주세요.