のjQuery、CSSは - ヘッダー画像を縮小し、

Question

$(document).scroll(function() { 
 
    var y = $(this).scrollTop(); 
 
    if (y > 300) { 
 
    $(".tabs-row").addClass("stick-to-top"); 
 
    $(".tabs-wrapper ul").fadeOut(); 
 
    $(".stat-accordion").fadeOut(); 
 
    $(".profpic").addClass("profpic-to-top"); 
 
    } else { 
 
    $(".tabs-row").removeClass("stick-to-top"); 
 
    $(".tabs-wrapper ul").fadeIn(); 
 
    $(".stat-accordion").fadeIn(); 
 
    $(".profpic").removeClass("profpic-to-top"); 
 
    } 
 
});

.profpic { 
 
    position: absolute; 
 
    top: -32px; 
 
    width: 148px; 
 
    height: auto; 
 
    border: solid 4px #fff; 
 
    border-radius: 4px; 
 
    z-index: 999; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -ms-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 
.profpic.profpic-to-top { 
 
    position: fixed; 
 
    top: 64px; 
 
    width: 32px; 
 
    height: auto; 
 
    border: none; 
 
    z-index: 99999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="shop-header"> 
 
    <div class="banner-wrapper"> 
 
    <a href="#"> 
 
     <img class="banner-img" src="img/banner.png"> 
 
    </a> 
 
    <div class="banner-panels"> 
 
     <div class="banner-items-container"> 
 
     <a href="#"> 
 
      <img class="profpic" src="img/profpic.png"> 
 
     </a> 
 
     <div class="panel-row-1"> 
 
      <div class="banner-title"> 
 
      <h1>Tas Kamera Square<span><img class="gold-merchant" src="img/goldmerchant.png"></span></h1> 
 
      <p>Fast Response, Fast Order</p> 
 
      </div> 
 
      <div class="socmed"> 
 
      <span class="share-to">Bagikan ke: </span> 
 
      <ul> 
 
       <li class="facebook"> 
 
       <img class="svg socmed-logo" src="img/svg/facebook.svg"> 
 
       </li> 
 
       <li class="twitter"> 
 
       <img class="svg socmed-logo" src="img/svg/twitter.svg"> 
 
       </li> 
 
       <li class="google"> 
 
       <img class="svg socmed-logo" src="img/svg/google.svg"> 
 
       </li> 
 
       <li class="blogger"> 
 
       <img class="svg socmed-logo" src="img/svg/blogger.svg"> 
 
       </li> 
 
       <li class="link green-btn"> 
 
       <img class="svg socmed-logo" src="img/svg/link.svg"> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     <div class="panel-row-2"> 
 
      <div class="shop-info-top"> 
 
      <ul> 
 
       <li><span><img class="svg info-img" src="img/svg/truck.svg"></span>13 jam</li> 
 
       <li><span><img class="svg info-img" src="img/svg/clock.svg"></span>20 menit yang lalu</li> 
 
       <li><span><img class="svg info-img" src="img/svg/location.svg"></span>Kota Semarang</li> 
 
       <li><span><img class="svg info-img" src="img/svg/home.svg"></span>1 Toko Fisik</li> 
 
       <li><span><img class="svg info-img" src="img/svg/open.svg"></span>November 2013</li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     <div class="panel-row-3"> 
 
      <div class="update"> 
 
      <span><img class="svg quotation" src="img/svg/quotation-mark.svg"> 
 
           TAS KAMERA READY Resellers Dropshippers are welcome 
 
          </div> 
 
          <div class="stat-panel"> 
 
           <ul> 
 
            <li> 
 
             <div class="stat-panel-top"><img class="speedometer" src="img/speed.png"></div> 
 
             <p>Kecepatan Toko</p> 
 
            </li> 
 
            <li> 
 
             <div class="stat-panel-top"><img class="medal" src="img/gold-medal-3.png"></div> 
 
             <p>Reputasi</p> 
 
            </li> 
 
            <li> 
 
             <div class="stat-panel-top"><span class="stat-sold"><a href="#">139rb</a></span> 
 
      </div> 
 
      <p>Produk Terjual</p> 
 
      </li> 
 
      <li> 
 
      <div class="stat-panel-top"><span class="stat-faved"><a href="#">145rb</a></span> 
 
      </div> 
 
      <p>Favorit</p> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

をスクロールしたときに、私は、ヘッダー（プロファイルのバナーとプロフィール画像）Facebookのスタイルでページを作成しようとしているトップに固執します。私はヘッダーをスクロールすると、プロファイルの写真を縮小し、上にスティックしたい（新しいナビゲーションバーになる）。私が最初にposition: absoluteでプロフィールの写真を入れて、この

.profpic { 
    position: absolute; 
    top: -32px; 
    width: 148px; 
    height: auto; 
    border: solid 4px #fff; 
    border-radius: 4px; 
    z-index: 999; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
} 

.profpic.profpic-to-top { 
    position: fixed; 
    top: 64px; 
    width: 32px; 
    height: auto; 
    border: none; 
    z-index: 99999; 
} 

のようにクラスを追加し、これはjQueryのは、私が使用しているだけ

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 300) { 
     $(".tabs-row").addClass("stick-to-top"); 
     $(".tabs-wrapper ul").fadeOut(); 
     $(".stat-accordion").fadeOut(); 
     $(".profpic").addClass("profpic-to-top"); 
    } 
    else { 
     $(".tabs-row").removeClass("stick-to-top"); 
     $(".tabs-wrapper ul").fadeIn(); 
     $(".stat-accordion").fadeIn(); 
     $(".profpic").removeClass("profpic-to-top");   
    } 
}); 

これらのコードを作る（バナーの高さは、例えば300ピクセルです）私のプロフィール写真は左下に縮小されています（これはナビバーのためトップになるはずです）、それでもページとともにスクロールします。

これを解決する方法はありますか？どうもありがとうございました！ :)

編集 HTML

<div class="shop-header"> 
      <div class="banner-wrapper"> 
       <a href="#"><img class="banner-img" src="img/banner.png"></a> 
       <div class="banner-panels"> 
        <div class="banner-items-container"> 
         <a href="#"><img class="profpic" src="img/profpic.png"></a> 
         <div class="panel-row-1"> 
          <div class="banner-title"> 
           <h1>Tas Kamera Square<span><img class="gold-merchant" src="img/goldmerchant.png"></span></h1> 
           <p>Fast Response, Fast Order</p> 
          </div> 
          <div class="socmed"> 
           <span class="share-to">Bagikan ke: </span> 
           <ul> 
            <li class="facebook"><img class="svg socmed-logo" src="img/svg/facebook.svg"></li> 
            <li class="twitter"><img class="svg socmed-logo" src="img/svg/twitter.svg"></li> 
            <li class="google"><img class="svg socmed-logo" src="img/svg/google.svg"></li> 
            <li class="blogger"><img class="svg socmed-logo" src="img/svg/blogger.svg"></li> 
            <li class="link green-btn"><img class="svg socmed-logo" src="img/svg/link.svg"></li> 
           </ul> 
          </div> 
         </div> 
         <div class="panel-row-2"> 
          <div class="shop-info-top"> 
           <ul> 
            <li><span><img class="svg info-img" src="img/svg/truck.svg"></span>13 jam</li> 
            <li><span><img class="svg info-img" src="img/svg/clock.svg"></span>20 menit yang lalu</li> 
            <li><span><img class="svg info-img" src="img/svg/location.svg"></span>Kota Semarang</li> 
            <li><span><img class="svg info-img" src="img/svg/home.svg"></span>1 Toko Fisik</li> 
            <li><span><img class="svg info-img" src="img/svg/open.svg"></span>November 2013</li> 
           </ul> 
          </div> 
         </div>       
        <div class="panel-row-3"> 
         <div class="update"> 
          <span><img class="svg quotation" src="img/svg/quotation-mark.svg"> 
           TAS KAMERA READY Resellers Dropshippers are welcome 
          </div> 
          <div class="stat-panel"> 
           <ul> 
            <li> 
             <div class="stat-panel-top"><img class="speedometer" src="img/speed.png"></div> 
             <p>Kecepatan Toko</p> 
            </li> 
            <li> 
             <div class="stat-panel-top"><img class="medal" src="img/gold-medal-3.png"></div> 
             <p>Reputasi</p> 
            </li> 
            <li> 
             <div class="stat-panel-top"><span class="stat-sold"><a href="#">139rb</a></span></div> 
             <p>Produk Terjual</p> 
            </li> 
            <li> 
             <div class="stat-panel-top"><span class="stat-faved"><a href="#">145rb</a></span></div> 
             <p>Favorit</p> 
            </li> 
           </ul> 
          </div> 
         </div> 
        </div> 
       </div>     
      </div> 
     </div> 

Answer 1

さて、あなただけの0pxに.profpic.profpic-to-top CSSのtopプロパティを変更する必要があります。ここに更新コードがあります。

.profpic.profpic-to-top { 
    position: fixed; 
    top: 0px; /*This change here*/ 
    width: 32px; 
    height: auto; 
    border: none; 
    z-index: 99999; 
} 

Here's the DEMO

---

更新

あなたのサイトのコードを見た後、私はそのz-index一部9999あるとprofpicの下で行っていた、あなたはnavbarが固定されていることを観察しましたそれ。階層のために、.profpic要素が配置されます。あなたが何をしても、それはfixed navbarになりました。私がここに示唆していることの1つは、navbar、hiddenの中にprofpic要素のコピーを保管しておき、scroll文書の場合は、元のimageを隠して、そのうちの1つをnavbarの中に表示します。 .navbarの更新されたHTMLは次のようになります。

<div class="navbar"> 
    <a href="#"> 
    <img class="profpic profpic-to-top" src="img/profpic.png" style="display: none;"> 
    </a> 
    <div class="nav-menu-wrapper"> 
    <!--Other Stuffs--> 
    </div> 
</div> 

今scrollイベントに、これらの2つの要素間のトグルの可視性。

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 300) { 
     $(".navbar .profpic").show(200); //show navbar prof pic 
     $(".banner-items-container .profpic").addClass("profpic-to-top").hide(200); 
     //to keep effect of shrinking we will still have addClass and then hide 
    } 
    else { 
     $(".navbar .profpic").hide(200); 
     $(".banner-items-container .profpic").show(200).removeClass("profpic-to-top"); 
     //vice versa of above. 
    } 
});