仅在一个 div 中固定位置的按钮答案

【问题标题】：Button in fixed position in only one div仅在一个 div 中固定位置的按钮
【发布时间】：2016-11-29 21:52:59
【问题描述】：

我创建了两个 div，一个在顶部，一个在底部。我创建了一个按钮。我在左侧底部页面提供了一个属性作为固定位置。如果我滚动页面，则按钮仅固定在该位置。基本上按钮在整个页面的固定位置。我的要求：当我滚动页面时，按钮应该只固定在某个高度。当我滚动页面时，按钮应该固定在左按钮上，直到第一个 div 底线触及按钮底线。并且当我滚动该按钮应与第一个 div 的底线一起移动的页面时。

基本上按钮应该在固定位置直到第一个 div 底线。当第一个div底线与按钮底线折叠时，按钮应该是相对的/绝对的，并随之移动。

希望你能理解我的要求。以下是我正在寻找要求的代码

 

   #top {
  border: 1px solid black;
  height: 900px;
  width: 80%;
  position: absolute;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  bottom: 0px;
  font-size: 16px;
  margin-left: 0px;
  cursor: pointer;
  padding: 10px 24px;
  position: fixed;
}

#bottom {
  border: 1px solid black;
  height: 900px;
  width: 80%;
  top: 910px;
  position: relative;
}

#middle {
  bottom: 50px;
  position: fixed;
}

<html>

  <body>
    <div id="top">
      <div id="middle">
        <button class="button">Fixed Element</button>
      </div>
    </div>

    <br>
    <br>
    <div id="bottom">


    </div>
  </body>

</html>

【问题讨论】：

固定位置是相对于视口的，关于这个问题有一些有用的提示：stackoverflow.com/questions/5209814/…，您可能会觉得有用。

标签： javascript

【解决方案1】：

我认为仅使用css 是不可能的。您需要javascript 或jquery。您需要 jquery 来运行我的示例。您应该使用top 或其他元素测量滚动量，并相应地更改按钮的底部/顶部，如下所示：

jQuery

$(window).scroll(function () {
  if (($(this).scrollTop()+$(window).height())>$('#top').height()){
    $("#btn_fixed").css({ bottom: ($(this).scrollTop()+$(window).height()- $('#top').height())+"px" });
  }else{
    $("#btn_fixed").css({ bottom: '0px' });
  }
});

我已更改您的代码的css 和html。

CSS

#top {
  border: 1px solid black;
  height: 900px;
  width: 80%;
  position: absolute;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  bottom: 0px;
  font-size: 16px;
  margin-left: 0px;
  cursor: pointer;
  padding: 10px 24px;
  position: fixed;
}

#bottom {
  border: 1px solid black;
  height: 900px;
  width: 80%;
  top: 910px;
  position: relative;
}

HTML

<div id="top">
  <div id="middle">
     <button class="button" id="btn_fixed">Fixed Element</button>
  </div>
</div>

<br>
<br>
<div id="bottom">


</div>

工作小提琴：https://jsfiddle.net/khairulhasanmd/h9y0bf1g/

【讨论】：

谢谢你能用“Javascript”解决这个问题吗？而不是 Jquery，我会帮我很多。
在javascript 中的实现需要更多的代码行，事件监听器等。您可以通过搜索谷歌自己转换它。如果这有帮助，您可以将此答案标记为已接受。谢谢。

【解决方案2】：

在您的 #middle div 上使用 position: sticky;

【讨论】：