gpt4 book ai didi

jquery - 滚动回到窗口顶部时 scrollTop 位置不正确

转载 作者:行者123 更新时间:2023-11-28 14:29:36 24 4
gpt4 key购买 nike

我正在使用 scrollTop 获取内部滚动 div .content-inner 的当前滚动位置。从这里开始,我将添加一个 translate3d 来更改另一个 div .header-top 的位置,以赋予它动画效果。

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

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

参见:https://jsfiddle.net/ez379rax/5/

最佳答案

是的,您是对的,问题是您到达顶部后计算中的负值。

我对代码做了一些改动,去掉了不必要的溢出,捕获了窗口滚动事件。还使 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com