时间戳

首页 > 解决方案 > 在到达底部之前的特定时间进行固定的 div 停止

javascript - 在到达底部之前的特定时间进行固定的 div 停止

问题描述

好吧，这一定是第 100 万次有人为此寻求帮助，但无论我尝试什么，我都找不到解决方案。我的网站上有一个带有 2 张图片的 div，它们的作用类似于产品列表右栏中的可点击广告。这个 div 是固定的，但我希望它在您向下滚动时停止在页面底部之前的 300 像素处。我知道为此我需要 javascript，即使我知道一点 HTML，但我对它并不擅长，而且我似乎无法弄清楚我需要做什么才能使它工作，无论我寻找多少次解决方案。我将下面的代码保留在我正在使用的 div 中。

<body>
  <div id="main">
    <a title="Link Here">
      <div id="paper">
        <img src="Image Here"/>
      </div>
    </a>
    <br />
    <a href="Link Here">
      <div id="product">
        <img src="Image Here"/>
        <br />
        <div id="description">
          ...Text Here....
        </div>
        <br />
      </div>
    </a>
  </div>
</body>

和 CSS，

  #main{
        width: 180px;
        height: auto;
        position: fixed;  
        padding-bottom: 300px;
    }
  #product{
        border: 1px solid;
        border-color: rgba(235,235,235,0.8);
        width: 180px;
        height: 270px;
    }
  #product img{
        margin: auto;
        display: block;
        width: 100%;
        height: 100%;   
        }
    #product:hover{
        border-color: red;
    }
    #paper{
        border: 1px solid;
        border-color: rgba(235,235,235,0.8);
        width: 180px;
        height: auto;
    }
    #paper img{
        margin: auto;
        display: block;
        width: 100%;
        height: 100%;   
        }
    #paper:hover{
         border-color: red;
    }
     #description{
        text-align: center;
        width: 95%;
        position: absolute;
        top: 520px;
        background-color: rgba(215,81,83,0.5);
        color: white;
        left: 4.5px;
    }

任何帮助将不胜感激。

标签： javascriptjquery

解决方案

你可以在没有 Javascript 的情况下做到这一点。这里最简单的解决方案是使用position: sticky;. 它是相对较新的，因此最旧的浏览器不支持它（有关兼容性表，请参见此处）。

具有粘性定位的元素将根据滚动位置（此处top: 0;）保持定义的位置，但当它滚动出窗口时将保持在其容器的范围内：

#body{
  height: 1000px;
  width: 100%;
  background-color: yellow;
}
#maindiv{
  width: 180px;
  height: auto;
  position: sticky;
  top: 0;
  padding-bottom: 300px;
  background-color: red;
}
#div-1{
  border: 1px solid;
  border-color: rgba(235, 235, 235, 0.8);
  width: 180px;
  height: auto;
}
#div-2{
  border: 1px solid;
  border-color: rgba(235, 235, 235, 0.8);
  width: 180px;
  height: 270px;
}
#bottom{
  width: 100%;
  height: 100px;
  background-color: blue;
}
<div id="body">
  <div id="maindiv">
      <div id="div-1"> 
      </div>
      <div id="div-2">
      </div>
  </div>
</div>
<div id="bottom">
</div>

推荐阅读