title: How do I resize an Avatar image into a smaller one in a fixed header navbar using jquery and css
body: <p>I need help about resize avatar image into a smaller one in a <code>fixed</code> header navbar. I created this <strong><a href="http://codepen.io/shadowman86/pen/WbpNvg" rel="nofollow">DEMO</a></strong> from <em>codepen.io</em></p>
  
  <p>When you scroll down on the page then the navbar to be a fixed. But i want to add a avatar in a navbar when scroll down like twitter. Anyone can help me here ?</p>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>$(document).ready(function() {
  
      $('.globalHeader').scrollToFixed();
      $('.footer').scrollToFixed( {
          bottom: 0,
          limit: $('.footer').offset().top
      });
      var summaries = $('.summary');
      summaries.each(function(i) {
          var summary = $(summaries[i]);
          var next = summaries[i + 1];
  
          summary.scrollToFixed({
              marginTop: $('.globalHeader').outerHeight(true) + 10,
              limit: function() {
                  var limit = 10;
                  if (next) {
                      limit = $(next).offset().top - $(this).outerHeight(true) - 10;
                  } else {
                      limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
                  }
                  return limit;
              },
              zIndex: 0
          });
      });
      $('#sponsor').scrollToFixed({
          marginTop: $('.globalHeader').outerHeight(true) + 10,
          limit: function() {
              var limit = $('.footer').offset().top - $('#sponsor').outerHeight(true) - 10;
              return limit;
          },
          minWidth: 1000,
          zIndex: 999,
          fixed: function() {  },
          dontCheckForPositionFixedSupport: true
      });
  
      $('#sponsor').bind('unfixed.ScrollToFixed', function() {
          if (window.console) console.log('sponsor preUnfixed');
      });
      $('#sponsor').bind('unfixed.ScrollToFixed', function() {
          if (window.console) console.log('sponsor unfixed');
          $(this).css('color', '');
          $('.globalHeader').trigger('unfixed.ScrollToFixed');
      });
      $('#sponsor').bind('fixed.ScrollToFixed', function() {
          if (window.console) console.log('sponsor fixed');
          $(this).css('color', 'red');
          $('.globalHeader').trigger('fixed.ScrollToFixed');
      });
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.globalHeader {
    z-index: 90;
    background-color: #323949;
    position: fixed;
    width: 100%;
    border-bottom: 1px solid #3f4858;
    color: #fff;
    font-size: 40px;
    font-family: arial, sans-serif;
    -webkit-box-shadow: 0px 0px 5px #000000;
    -moz-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
  }
  .globalHeader_in {
    z-index: 99999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    min-width: 960px;
    width: 100%!important;
    max-width: 1580px;
    height: 52px;
    left: 0;
    top: 0;
    padding: 0 20px 0 15px;
    margin: auto;
  }
  .profile-kapak-alani {
      width:100%;
      height:385px;
      background-position: center top;
      background-size: 100% auto;
      background-size:cover;
      border-bottom:1px solid #3f4858;
      background: #323949 url(icons/genis.png) repeat 0 0;
  }
  .profil-kapak-profil-resim {
      width:900px;
      height:385px;
      margin:0px auto;
      }
  .profil-kapak {
      width:900px;
      height:385px;
      overflow:hidden;
      }
  .profil-kapak img {
      width:900px;
      }
  .profil-ana-etki-alani{
      width: 900px;
      margin: auto;
      padding: 52px 30px 0;
      overflow:hidden;
       border-radius:3px;
      -webkit-border-radius:3px;
      -o-border-radius:3px;
      -moz-border-radius:3px;
      }
  .kullanici-profil-fotografi-alani {
      float:left;
      width:200px;
      height:200px;
      margin-top:-110px;
      margin-left:30px;
      position:absolute;
      padding:8px;
      z-index:5;
      background-color: rgba(50, 57, 73, 1);
      border-radius:5px;
      -webkit-border-radius:5px;
      -o-border-radius:5px;
      -moz-border-radius:5px;
      box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.5) inset; 
      }
  .kullanici-profil-fotografi-alani span {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    -webkit-border-radius:5px;
      -o-border-radius:5px;
      -moz-border-radius:5px;
  }
  .profil-fotografini-degistir {
      position:absolute;
      width:55px;
      height:35px;
      margin-top:-38px;
      margin-left:4px;
      }
  .link-abonelik-takipci-fotograf-takip {
     width:100%;
     height:60px;
     position:relative;
     border-bottom:1px solid #3f4858; 
     background-color: #323949;
     border-top:1px solid #3f4858;    
     box-shadow: 0 -7px 5px -6px #000000;
     -webkit-box-shadow: 0 -7px 5px -6px #000000;
     -moz-box-shadow:0 -7px 5px -6px #000000;;
     -o-box-shadow:0 -7px 5px -6px #000000;;
      }
  .la-t-f-t {
     width:900px;
     height:60px;
     margin:0px auto;
      }
  .ll-p-t{
     float:right;
     width:630px;
     height:60px;
      }
  .pay-t{
     float:left;
     width:88px;
     height:60px;
     padding-left:15px;
     padding-right:15px;
      }
  .pay-t-t {
     font-weight:normal;
     color:#9aa2ae;
     font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
     font-size:11px;  
     margin-top:10px;
     float:left;
     width:88px;
     text-align:center;
      }
  .p-t-t-a{
      font-weight:bold;
     color:#9aa2ae;
     font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
     font-size:18px;  
     text-align:center;
     margin-top:8px;
     float:left;
     width:88px;
      }
  #navbar {
  
      position: absolute;
     width:100%;
    height:60px;
  }
  .main-content{
    width:100%;
    height:auto;
    overflow:hidden;
    background-color:red;
  }
  .content{
    margin:0px auto;
    width:900px;
    height:900px;
  }
  .footer {
      background-color: #eee;
      padding: 0px;
      clear: both;
  }
  .footer.scroll-to-fixed-fixed {
      color: red;
  }
  </code></pre>