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（例如横幅高度为300px）

$(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");        
    }
});

这些代码只会使我的个人资料图片缩小到左下角（据说它应该是顶部，因为它是用于导航栏），并且它仍然与页面一起滚动。

知道如何解决这个问题吗？非常感谢你！ ：）

修改 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

您只需将top CSS的.profpic.profpic-to-top属性更改为0px即可。这是更新的代码。

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

<强> Here's the DEMO

<强>更新

在查看您的网站代码后，我发现您已navbar已修复，其z-index有些9999且profpic正在其中。由于层次结构，.profpic元素被放置，无论你做什么，它都会被置于fixed navbar之下。我在此建议的一件事是，最初在profpic，navbar内保留hidden元素的副本，并在scroll文档时隐藏原始image和显示navbar内的一个，反之亦然。 HTML的更新.navbar将为：

<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事件中，切换这两个元素之间的可见性。

$(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.
    }
});