时间戳

首页 > 解决方案 > 与容器底部距离最小的粘性位置

javascript - 与容器底部距离最小的粘性位置

问题描述

我试图在一个容器中放置一些内容，距离底部有一些最小距离。在下面的这个例子中，我希望蓝色元素在到达底部之前停止在某个点。

我知道我只能将两个容器堆叠在一起，而第一个容器内只有粘性内容。但是因为容器可能会在按下按钮时变大，这是不可能的，因为我确实希望粘性内容在“新”内容上滚动得更远。

换句话说，我需要粘性内容始终与容器底部保持最小距离。这可能以某种优雅的方式吗？

我首先认为它也与将bottom属性添加到元素有关，但这并没有做任何事情。我还尝试了一些javascript方法从位置切换sticky并absolute基于用户滚动位置，但这非常有效。

如果有人可以帮助我，那将不胜感激。

body{
  min-height:2000px;
}
.content{
  width:300px;
  background:red;
  margin-top:20px;
}
.overlayContent{
  width:100%;
  min-height:100px;
  padding:10px;
  background:blue;
  position:sticky;
  top:0;
  bottom:20px;
  z-index:999;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>
<body>
  <div class="content">
    <div class="overlayContent">
          
    </div>
    <p class="mt-16">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ante enim, maximus vitae rutrum eu, ultrices ac mauris. In ac libero nisi. Suspendisse vel dictum purus. Etiam in orci orci. Donec tincidunt turpis a justo consequat, eu sodales lorem ultrices. Suspendisse dictum massa vitae elementum fringilla. Fusce est sapien, faucibus ut ultricies eget, ultrices sed turpis. Praesent ac lectus eget eros fringilla aliquam.

    <a class="btn btn-primary w-100" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Expand
          </a>
eu sodales lorem ultrices. Suspendisse dictum massa vitae elementum fringilla. Fusce est sapien, faucibus ut ultricies eget, ultrices sed turpis. Praesent ac lectus eget eros fringilla aliquam.
      <p>
      <div class="collapse" id="collapseExample">
        <div class="card card-body">
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
          Some content to make the original content container a bit larger.
        </div>
      </div>
  </div>
</body>

标签： javascriptcsscss-positionsticky

解决方案

如果我理解的情况正确，蓝色框应该在按钮之前停止。请纠正我，如果它是错误的。

* {border:medium none; margin:0; padding:0;}
*:hover, *:active, *:focus {outline:none !important;}
html {height:100%;}
body{
  padding:0 0 20px;
  min-height:2000px;
  display:flex;
  flex-flow:row nowrap;
}
.content{
  width:300px;
  background:red;
  margin-top:20px;
}
.overlayContent{
  width:300px;
  min-height:100px;
  padding:10px;
  background:blue;
  position:sticky;
  top:0;
  bottom:20px;
  z-index:999;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="format-detection" content="telephone=no" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>
<body>
  
  <div class="content">
    <div class="overlayContent">

    </div>
        
        <p class="mt-16">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ante enim, maximus vitae rutrum eu, ultrices ac mauris. In ac libero nisi. Suspendisse vel dictum purus. Etiam in orci orci. Donec tincidunt turpis a justo consequat, eu sodales lorem ultrices. Suspendisse dictum massa vitae elementum fringilla. Fusce est sapien, faucibus ut ultricies eget, ultrices sed turpis. Praesent ac lectus eget eros fringilla aliquam.</p>
        
    <a class="btn btn-primary w-100" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      Expand
    </a>

        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
          </div>
        </div>
  </div>
</body>
</html>

推荐阅读