滚动回窗口顶部时，scrollTop位置不正确

我使用scrollTop来获取内部滚动div.content-inner的当前滚动位置。从这里开始，我添加一个translate3d来更改另一个div.header-top的位置，使其具有动画效果。

我遇到的问题是，在.content-inner上向上滚动后，.header-top的位置有点小故障，而不是它最初的位置。

根据我向上滚动的速度，也将决定位置变化的程度。如果检查控制台，我怀疑这与translate3d上输出的双负值有关。

请参阅：https://jsfiddle.net/ez379rax/5/

是的，你是对的，一旦你到达顶部，问题就是计算中的负值。

我对代码进行了一些更改，删除了不必要的溢出，并捕获了窗口滚动事件。还使页眉很好地放在容器内。

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>

相关内容

最新更新

热门标签：