我正在使用 scrollTop 获取内部滚动 div .content-inner 的当前滚动位置。从这里开始，我将添加一个 translate3d 来更改另一个 div .header-top 的位置，以赋予它动画效果。
我遇到的问题是在 .content-inner 上向上滚动后，.header-top 位置有点问题，而不是它最初的位置。
根据我向上滚动的速度也将决定位置变化的幅度。如果您检查控制台，我怀疑这与 translate3d 上输出的双负值有关。
最佳答案
是的，您是对的，问题是您到达顶部后计算中的负值。
我对代码做了一些改动，去掉了不必要的溢出，捕获了窗口滚动事件。还使 header 非常适合容器内部。
var pos = 0;
var $ = jQuery;
$(window).on("scroll", function() {
var st = $(this).scrollTop();
pos = (1.6 * (-st) - 20);
if(st === 0)
{
pos = 0;
}
var up = 'translateY(' + pos + 'px )';
$(".header").css({
"transform": up
});
});.header{
color: #333;
height: 150px;
padding: 25px;
width:100%;
position: fixed;
background:cornflowerblue;
margin:5px;
}
.content-wrap{
height:100%
}
.content-inner{
padding-top: 100px;
height: 100%;
padding-left: 25px;
padding-right: 25px;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
-ms-scroll-chaining: none;
display: block;
background:#fff
}
.scroll-inner{
min-height: calc(100% + 36px);
}
.card{
margin-bottom:1.5rem;
width:100%;
p{
margin-bottom:0
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="content-wrap">
<div class="header">
<h4>
Widget Header
</h4>
</div>
<div class="content-inner">
<div class="scroll-inner">
<div class="card">
<div class="card-body">
<h2>
Filler Card
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<!-- end of card -->
<div class="card">
<div class="card-body">
<h2>
Filler Card
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<!-- end of card -->
<div class="card">
<div class="card-body">
<h2>
Filler Card
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<!-- end of card -->
<div class="card">
<div class="card-body">
<h2>
Filler Card
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<!-- end of card -->
<div class="card">
<div class="card-body">
<h2>
Filler Card
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<!-- end of card -->
<div class="card">
<div class="card-body">
<h2>
Filler Card
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<!-- end of card -->
</div>
</div>
</div>
</body>关于jquery - 滚动回到窗口顶部时 scrollTop 位置不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54265969/