您需要在容器内将按钮设置为position: absolute。

Snippest：

.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>

你可以修改你的HTML标记，并使用一个 Package 器元素与位置相对。然后你可以使用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>

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

我通过将按钮放在下面，然后使用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>

似乎起作用了。如果有人有更好的解决方案，当然欢迎。谢谢你的回答。

你可以通过两种方式解决你的问题。
纯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 Link

<!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>