固定位置在滚动的 div 内部

Question

我有一个高度为400px的

元素。内容很长，因此该

可以在y轴上滚动。我需要在

的右侧有一些按钮，以固定位置位于该

内部。

我该如何实现？使用jQuery、CSS或其他都可以。

我尝试了fixTo，但对于这个问题似乎不起作用，并且还有一个CSS解决方案，它建议“使用position:fixed，但不要使用left/right - 只需使用margin”。它工作得很好，但如果页面本身滚动，按钮也会滚动 - 但它们不应该。它们应该始终固定在

内部。

示例代码：

<div class="container" style="width: 960px; height: 400px; position: relative;">
    <div class="buttons needToBeFixed"></div>
    <div class="aLotOfContent" style="width: 2000px;"></div>
</div>

- Christian Bundgaard

---

是的 - 刚刚添加了它。 - Christian Bundgaard

你是在寻找类似这样的东西吗？http://jsfiddle.net/5adfmme5/ - Canica

@jcruz - 没错，除此之外，在你的例子中，我相当确定它会固定在浏览器窗口上。但我需要它固定在页面中间的一个 div 上。 - Christian Bundgaard

您可以在div中的任何位置放置固定元素。 - nykc

这个答案 https://dev59.com/9m435IYBdhLWcg3wyzQJ#32778811 差不多就对了。jQuery 只是不够流畅 - 很颠簸。 - Christian Bundgaard

Answer 1

你需要将按钮设置为容器内的绝对定位（position: absolute）。

片段：

.container {
    width: 250px;
    outline: 1px solid blue;
    width: 300px; 
    height: 150px; 
    position: relative;
}

.container .aLotOfContent {
    width: 300px;
    height: 150px;
    overflow: auto;
    background: #e3ecfc;
}

.container .fixed{
    width: 60px;
    height: 40px;
    background-color: #e52727;
    color: white;
    position: absolute;
    right: 40px;
    bottom: 20px;
}

html, body{
    height: 400px;
}

<div class="container">

 <button class="fixed"> im fixed! </button>

 <div class="aLotOfContent">
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
 </div>
    
</div>   
  

- Swrena

Answer 2

您可以修改HTML标记并使用带有相对位置的包装元素。然后，您可以使用position: absolute;将元素相对于此父元素定位。

body {
  width: 1500px;
  height: 1500px;
}
#wrapper {
  position: relative;
  width: 350px;
  overflow: hidden;
}
#container {
  height: 350px;
  overflow-y: scroll;
  border: solid #000 1px;
}
.sticky {
  position: absolute;
}
.right {
  right: 0;
}
.bottom {
  bottom: 0;
}

<div id="wrapper">
  <input type="button" value="Sticky button" class="sticky top" />
  <input type="button" value="Sticky button" class="sticky bottom left" />
  <input type="button" value="Sticky button" class="sticky right" />
  <input type="button" value="Sticky button" class="sticky bottom right" />
  <div id="container">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      <br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
      desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </div>
</div>

- A. Wolff

Answer 3

我通过将按钮放在下方，然后使用 margin-top: -400px; 解决了这个问题。

<div style="position: relative">
    <div class="container" style="height: 400px;"></div>
    <div class="buttons" style="margin-top: -400px; position: absolute; right: 0;"></div>
</div>

看起来是可以工作的。如果有更好的解决方案，当然欢迎。感谢所有的回答。

- Christian Bundgaard

Answer 4

你可以将对象添加到固定位置的 div 外部，具体取决于 div 内部的内容。如果你的 div 取决于其中的数据，一些 JavaScript 可以在执行所需的整体依赖操作之前聚合内容。

- mh00h

---

我不太确定我理解你的意思。是的，div取决于其中的数据 - 我自己无法弄清楚JS，所以我正在寻找解决方案或者一个jQuery插件的链接之类的东西。 - Christian Bundgaard

我已经添加了一些HTML标记。想象一下.container是body，.buttons上使用position: fixed。这就是我想要的。 - Christian Bundgaard

Answer 5

您可以用两种方式解决问题。

纯HTML/CSS

<div class="container relparentwrap" style="width: 960px; height: 400px;">
        <div style="height:100%; width:100%;  position: relative; overflow:auto;">
        <div class="aLotOfContent" style="width: 100%; background:red;padding:20px 0;">
            <div style="height:400px; background:green"></div>
            <div style="height:500px; background:yellow"></div>
            <div style="height:500px; background:purple"></div>
        </div>
        </div>
        <div class="buttons needToBeFixed" style="border:solid 1px #fff;margin-top: -20px;position: relative;z-index: 1;">Helllo</div>
</div>

由于needToBeFixed已经超出了您的滚动区域，它将始终停留在div的末尾。

jQuery解决方案 正如您所提到的，您不会使用jQuery遇到问题，以下是您的代码片段。 JSFiddle链接

<!DOCTYPE html>
<html>
<head>
    <title>Fixed position inside scrolling div</title>  
</head>
<body style="margin:0;">
    <div class="container relparentwrap" style="width: 960px; height: 400px; position: relative; overflow:auto;">
        <div class="aLotOfContent" style="width: 100%; background:red;padding:20px 0;">
            <div style="height:400px; background:green"></div>
            <div style="height:500px; background:yellow"></div>
            <div style="height:500px; background:purple"></div>
        </div>
        <div class="buttons needToBeFixed" style="position:absolute; left:0; right:0; border:solid 1px #fff;">Helllo</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
    $(function() {
        var p = $(".relparentwrap").offset();
        var tPos = (p.top + $(".relparentwrap").outerHeight()) - $(".needToBeFixed").outerHeight();
        vPos=tPos;
        $(".needToBeFixed").css("top",tPos);
        $(".relparentwrap").scroll(function() {
            tPos = vPos + $(".relparentwrap").scrollTop();
            console.log(tPos);
            $(".needToBeFixed").css("top",tPos);
        });

    });
    </script>
</body>
</html>

- Growyour GK