我想使用页面上的一个元素作为以下内容的标题,但是当用户滚动到内容时,这个标题元素应该固定在标题中。类似于 iOS 音乐应用中的 ABC 字幕。
见这里:https://jsfiddle.net/1e7ync4w/
HTML
<div>
<div class="top">
Test
</div>
<div class="content">
<div class="scroller">
</div>
Test
</div>
</div>
CSS
.top {
background-color: yellow;
height: 300px;
}
.content {
position: relative;
height: 600px;
background-color: green;
}
.scroller {
position: absolute;
width: 100%;
height: 10px;
top: 0;
left: 0;
background-color: blue;
}
.scroller.fixed {
position: fixed;
}
JS
$(document).ready(function() {
$(window).on('scroll touchmove', function() {
$('.scroller').removeClass('fixed');
var scrollTop = $(window).scrollTop();
var scrollerOffsetTop = $('.scroller').offset().top;
if(scrollerOffsetTop <= scrollTop) {
$('.scroller').addClass('fixed');
}
});
});
问题是 iOS Safari 似乎有一个错误,即在滚动时将元素更改为固定(通过 JavaScript)。一旦用户滚动到内容中,title-element 就会变得不可见,但在将手指从显示器上松开后会显示出来(scroll-end)。
我只在 iOS 9.3.2 safari 上对此进行了测试,但我认为这个问题比较老。
最佳答案
我找到了解决这个问题的方法。这有点骇人听闻,但我为这个 iOS 错误找到了唯一的解决方法。
需要“激活”浏览器的 GPU 才能更新相应的元素。这可以通过设置 transform: translate
来实现定位跳转到固定时通过 JS 样式。
该示例的代码如下所示:
$(document).ready(function () {
$(window).on('scroll touchmove', function () {
$('.scroller').removeClass('fixed');
var scrollTop = $(window).scrollTop();
var scrollerOffsetTop = $('.scroller').offset().top;
if (scrollerOffsetTop <= scrollTop) {
$('.scroller').addClass('fixed').css({
'transform': 'translate3d(0px,0px,0px)',
'-moz-transform': 'translate3d(0px,0px,0px)',
'-ms-transform': 'translate3d(0px,0px,0px)',
'-o-transform': 'translate3d(0px,0px,0px)',
'-webkit-transform': 'translate3d(0px,0px,0px)'
});
}
});
});
关于iOS Safari 问题 - 将绝对位置更改为固定时,元素在滚动时变得不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37457887/