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

您只需将 .profpic.profpic-to-top CSS 的 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 下。我在这里建议的一件事是，在 navbar 中保留一份 profpic 元素的副本，hidden 最初和当你 scroll 文档，隐藏原始 image 并显示 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 事件上，在这两个元素之间切换可见性。

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