Question

我创建了两个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>

Answer 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/

Answer 2

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

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

2 个答案: