자바 sticky 함수 관련하여 질문드려요~

자바 sticky 함수 관련하여 질문드려요~

QA

자바 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);
        }  
    }
});

이 질문에 댓글 쓰기 :

답변 1

위의 소스로 편집을 좀 해봤는데

 

http://deb.kr/test/logo.php

 

잘되는거 같은데요

 

오호 링크까지 해주셔서 감사해요..!

제가 궁금한 부분의 경우에는

[logo_1번] [logo_2번]를 미리 만들어서

기존 스크롤 하지않을경우에는 [logo_1번]이 나오지만

아래로 스크롤할경우에는 [logo_2번]으로 이미지가 변경되는걸 원해서요~!

답변을 작성하시기 전에 로그인 해주세요.
전체 32
QA 내용 검색

회원로그인

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