css - 当用户滚动到它时，如何让 div 粘在屏幕底部？-6ren

css - 当用户滚动到它时，如何让 div 粘在屏幕底部？

转载作者：行者123 更新时间：2023-11-28 00:34:39

我正在创建一个登陆页面，需要一个 div 在滚动到屏幕底部时停留在屏幕底部。我正在使用 css sticky，当我想将 div 粘贴到窗口顶部而不是底部时，它可以工作。请测试移动尺寸。

<html>
<div id="page_content">
  <div class="row clearfix">
    <div class="column_12 free-tote-top-div">
      <div class="free-tote-image" style="display:none;">
      </div>
        <div class="ft-top-div-words">
        <h2 class="margin_bottom_50">Free Organic Tote</h2>
        <h1 class="margin_bottom_50 without-padding">Healthy can be<br>easy as 1, 2, 3.</h1>
        <div class="deodorant-thumbnail-mobile">
        </div>
        <p class="tote-directions">1. Make a free trial account.</p>
        <p class="tote-directions">2. Purchase any product.</p>
        <p class="tote-directions">3. Get a free tote with your first purchase.</p>
        <a href="#" class="ft-signup-btn subscribe-to-membership-45-58 subscribe-to-membership membuttonclick" style="display:none">Get Your Gift — Start Free Trial</a>
      </div>
    </div>
    <div class="free-tote-second-div">
      <h3>Get Your Gift — Start Free Trial</h3>
    </div>
    <div class="column_12 free-tote-third-div"></div>
    <div class="column_12 free-tote-review-section">
      <div class="free-tote-reviews">
        <h1>Why we love the tote.</h1>
        <div class="free-tote-review">
          <img src="https://cdn.shopify.com/s/files/1/0838/7991/files/starz3.png?14175916445677503279" alt="reviews"/>
          <p class="ft-review-words">“It’s perfect for shopping, going to the gym, or even an overnight trip.”</p>
          <p class="ft-review-name">- Nosipho M.</p>
        </div>
        <div class="free-tote-review">
          <img src="https://cdn.shopify.com/s/files/1/0838/7991/files/starz3.png?14175916445677503279" alt="reviews"/>
          <p class="ft-review-words">“Wonderful bag... Everything about it is top-notch.“</p>
          <p class="ft-review-name">- Spencer W.</p>
        </div>
      </div>
    </div>
    <div class="free-tote-product-carousel">
      <p>Healthy. Affordable. Eco-Friendly.<br>It’s all good.</p>
      <div class="powr-image-slider" id="ab348c59_1547667152"></div>
      <div class="ft-member-favorites row" id="mission_top_text" style="display:none">{% section 'member-favorites' %}</div>
    </div>
    <div class="free-tote-publications">
      <div class="ft-pub-top">
        <div class="ft-publication">
          <p>“Public Goods takes the guesswork out of simple, easy-to- use grooming and bathroom products.”</p>
          <img src="https://cdn.shopify.com/s/files/1/0838/7991/files/daily-beast.png?16842974685795887946" />
        </div>
        <div class="ft-publication" style="float:right">
          <p>“Household items aren’t marked up. (You pay only the amount it costs to produce the items.)”</p>
          <img src="https://cdn.shopify.com/s/files/1/0838/7991/files/buzzfeed.png?16842974685795887946" />
        </div>
      </div>
      <div class="ft-pub-bottom">
        <div class="ft-publication">
          <p>“Better quality everyday products in biodegradable or recycled packaging.”</p>
          <img src="https://cdn.shopify.com/s/files/1/0838/7991/files/forbes_09623cdb-cbcc-4ab2-9c02-4f6c53c66e78.png?16842974685795887946" />
        </div>
        <div class="ft-publication" style="float:right">
          <p>“Products are all natural from the ingredients to the physical bottles. A must have...”</p>
          <img src="https://cdn.shopify.com/s/files/1/0838/7991/files/teenvogue.png?16842974685795887946" />
        </div>
      </div>
  </div>
</div>
</html>

<style>
  .row {
    width: 1500px;
  }
  .tote-directions {
    font-family: "NB";
    font-size: 18px;
    line-height: 26px;
  }
  .deodorant-thumbnail-mobile {
    padding-bottom: 20px;
  }

####################### CODE IN QUESTION ########################
  .free-tote-second-div {
    background-color: rgb(220, 136, 108);
    text-align: center;
    color: #fff;
    height: 50px;
    margin-top: 25px;
    position: sticky;
    position: -webkit-sticky;
    -webkit-transform: translateZ(0);
    bottom: 50px;
  }
  .free-tote-second-div h3 {
    padding-top: 18px;
    font-size: 16px;
  }
  .free-tote-third-div {
    height: 350px;
    background-size: cover;
    background-position-x: 35%;
  }
  .free-tote-review-section {
    height: 500px;
    background-color: rgb(220, 136, 108);
    text-align: center;
    color: #fff;
  }
  .free-tote-review-section h1 {
    padding-top: 50px;
    padding-bottom: 50px;
    font-size: 32px;
  }
  .free-tote-review {
    padding-bottom: 50px;
  }
  .free-tote-review img {
    width: 120px;
  }
  .ft-review-words {
    font-family: 'NBH';
    font-size: 20px;
    margin: auto;
    width: 95%;
    line-height: 30px;
  }
  .ft-review-name {
    padding-top: 20px;
  }
  .free-tote-product-carousel {
    height: 425px; 
    text-align: center;
    font-family: 'NB' !important;
  }
  .free-tote-product-carousel p {
    font-size: 20px;
    margin-top: 40px;
    line-height: 26px;
  }
  .free-tote-product-name {
    color: blue !important;
  }
  .free-tote-publications {
    height: 600px;
    background-color: rgb(220, 136, 108);
    color: #000;
  }
  .ft-publication {
    width: 48%;
    color: #fff;
    display: inline-block;
  }
  .ft-publication p {
    font-size: 20px;
    line-height: 26px;
    padding-bottom: 20px;
    font-weight: bold;
  }
  .ft-publication img {
    width: 50%;
    max-width: 150px;
  }
  .ft-pub-top {
    padding-top: 50px;
    width: 95%;
    padding-left: 25px;
  }
  .ft-pub-bottom {
    padding-top: 50px;
    width: 95%;
    padding-left: 25px;
  }

  @media (min-width: 1350px) {
    .free-tote-publications {
      margin-top: 125px !important;
    }
  }

  @media (min-width: 1100px) {
    .free-tote-publications {
      height: 275px !important ;
      margin-top: 75px;
    }
    .ft-top-div-words {
      padding-left: 100px;
    }
   .free-tote-image {
     margin-right: 100px;
   }
   .ft-pub-top {
     width: 45%;
     float: left;
     margin-left: 40px;
     padding-left: 0;
    }
   .ft-pub-bottom {
     width: 45%;
     float: right;
     margin-right: 40px;
   }
  }

   @media (min-width: 951px) {
    .free-tote-image {
      width: 33px;
      margin-right: 150px;
    }
    .powr-image-slider {
      display: none;
    }
    .ft-member-favorites {
      display: block !important;
    }
    .free-tote-product-carousel p {
      padding-bottom: 40px;
    }
  }

  @media (min-width: 900px) {
    .free-tote-image {
      width: 33px;
      margin-right: 150px;
    }
  }

  @media (min-width: 797px) {
    .free-tote-image {
      display: block !important;
      width: 33%;
      float: right;
      margin-right: 150px;
    }
    .ft-top-div-words {
      width: 50%;
      padding-top: 50px;
    }
  }

  @media (min-width: 737px) {
    .free-tote-top-div {
      height: 450px;
    }
    .deodorant-thumbnail-mobile {
      display: none;
    }
    .free-tote-image {
      display: block !important;
      width: 52%;
      float: right;
      margin-right: 10px;
      max-width: 450px !important;
    }
    .ft-top-div-words {
      width: 50%;
      padding-top: 50px;
    }
    .ft-signup-btn {
      display: block !important;
      padding: 15px 0px 15px 15px;
      width: 240px;
      background-color: rgb(220, 136, 108);
      color: #fff;
      font-family: 'NBH';
      margin-top: 50px;
    }
    .free-tote-third-div {
      width: 50%;
      float: left;
      height: 500px;
    }
    .free-tote-review-section {
      width: 50%;
      float: right;
    }
    .free-tote-product-carousel {
      clear: both;
      margin-top: 550px;
      margin-bottom: 20px;
    }
    .free-tote-second-div {
      top: 55px;
    }
    .free-tote-second-div h3 {
      padding-top: 14px;
    }
  }

  @media (min-width: 525px) {
    .free-tote-publications {
      height: 500px;
    }
  }

  @media (max-width: 400px) {
    .free-tote-review-section h1 {
      font-size: 26px;
    }
    .free-tote-review-section {
      height: 550px;
      width: 100%;
    }
  }

  @media (max-width: 335px) {
    .free-tote-review-section {
      height: 600px;
    }
  }

  @media (max-width: 313px) {
    .free-tote-publications {
       height: 700px;
    }
  }

我希望 div .free-tote-second-div 在滚动到屏幕底部时保持在屏幕底部。

最佳答案

您可以使用以下代码将 div 粘贴到页面底部:

.free-tote-second-div { 位置:固定；底部:0px； }

确保您正在为移动 View 修改第 281 行，为桌面 View 修改第 81 行。

关于css - 当用户滚动到它时，如何让 div 粘在屏幕底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54245344/

文章推荐： c++ - 更改类变量时遇到问题

文章推荐： c++ - 未调用 Qt 信号槽

文章推荐： javascript - 为 WordPress 主题添加 JavaScript 功能

文章推荐： C++反向字符串递归

css - IE7 输入定位错误(粘!)
查看此页面:http://jsbin.com/itufix使用 IE(页面自动启用 IE7 模式)。在这里您将找到如何使用显示 block 呈现内联元素(输入和跨度)的示例。所有元素的边距和填充都设
ios - 在自定义 UITableviewCell 中设置图像不会*粘*
我有一个自定义的 UITabvleViewCell，其中有一个 UIImageView。当在 cellForRowAtIndexPath 中设置单元格时，我可以很好地设置图像(尽管我没有)，但是在某些

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 当用户滚动到它时，如何让 div 粘在屏幕底部？