Javascript 按钮仅在一个div中处于固定位置

我已经创建了两个div，一个在顶部，一个在底部。 我已经创建了一个按钮。我在页面底部左侧给出了一个属性作为固定位置。 如果我滚动页面，按钮仅固定在该位置。 基本上，整个页面的按钮都处于固定位置。 我的要求： 当我滚动页面时，按钮应仅固定在某个特定高度。 当我滚动页面时，按钮应该固定在左按钮上，直到第一个div底线接触到按钮底线为止。 并且我滚动页面，按钮应该沿着第一个div的底线移动

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

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

#顶{
边框：1px纯黑；
高度：900px；
宽度：80%；
位置：绝对位置；
}
.按钮{
背景色：#4CAF50；
边界：无；
颜色：白色；
底部：0px；
字体大小：16px；
左边距：0px；
光标：指针；
填充：10px 24px；
位置：固定；
}
#底部{
边框：1px纯黑；
高度：900px；
宽度：80%；
顶部：910px；
位置：相对位置；
}
#中间的{
底部：50px；
位置：固定；
}

固定元件

我认为仅使用

css

是不可能的。您需要

javascript

或

jquery

。 您需要

jquery

来运行我的示例。您应该使用

顶部

或其他元素测量滚动量，并相应地更改按钮的底部/顶部，如下所示：

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>

固定元件

---

工作提琴：

在您的

#middle

div

上使用固定的位置相对于视口，在这个问题上有一些有用的提示：您可能会发现这些提示很有用。谢谢您能使用“Javascript”解决这个问题吗？用

javascript

实现将需要更多的代码行，事件监听器e.t.c。你可以通过搜索谷歌自己转换它。如果这有帮助，您可以将此答案标记为已接受。谢谢