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

Question

I have created two div's, one at the top and one at the bottom.我创建了两个 div，一个在顶部，一个在底部。 I have created one button.我创建了一个按钮。 I gave a property as fixed position at left side bottom page.我在左侧底页给出了一个属性作为固定位置。 If i scroll the page the button is fixed at that position only.如果我滚动页面，按钮仅固定在该位置。 basically the button is in fix position for the whole page.基本上按钮在整个页面的固定位置。 My Requirement: When I scroll the page the button should be fixed for some certain height only.我的要求：当我滚动页面时，按钮应该固定在某个特定的高度。 When I am scrolling the page the button should be fixed at left button only till the first div bottom line touches the button bottom line.当我滚动页面时，按钮应该固定在左按钮，直到第一个 div 底线接触按钮底线。 and wen I scroll the page that button should move along with the bottom line of first div.然后我滚动页面，按钮应该随着第一个 div 的底线移动。

Basically the button should be in fixed position till the first div bottom line only.基本上按钮应该在固定位置，直到第一个 div 底线。 when the first div bottom line collapse with the button bottom line, the button should be relative/absolute and moves along with it.当第一个 div 底线与按钮底线折叠时，按钮应该是相对/绝对的并随之移动。

Hope you understood my requirement.希望你明白我的要求。 Below is my code for which I am looking for requirement以下是我正在寻找要求的代码

 #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

I think this is not possible with only css .我认为仅使用css是不可能的。 You need javascript or jquery .你需要javascript或jquery 。 You need jquery to run my example.您需要jquery来运行我的示例。 You should measure the scrolled amount with the top or other element and change the bottom/top of the button accordingly like this:您应该使用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' });
  }
});

I have changed css and html of your code.我已经更改了您代码的css和html 。

CSS 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 HTML

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

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


</div>

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

Answer 2

Use position: sticky;使用位置：粘性； on your #middle div在你的#middle div

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

问题描述

2 个解决方案

解决方案1
1 2016-07-26 11:57:01

解决方案2
1 2020-07-23 05:00:33

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

问题描述

2 个解决方案

解决方案1 1 2016-07-26 11:57:01

解决方案2 1 2020-07-23 05:00:33

解决方案1
1 2016-07-26 11:57:01

解决方案2
1 2020-07-23 05:00:33