当我滚动到某一点时,我正试图淡入页面的标题。
在滚动时出于某种原因在移动设备上,它不会在特定点淡入。发生的事情是,直到你完全停止滚动并且它没有淡入淡出动画时才出现。
非常感谢任何帮助。
//Header to appear on scroll
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 150) {
$('.header-bar-small').fadeIn();
} else {
$('.header-bar-small').fadeOut();
}
});
答案 0 :(得分:1)
在深入研究Dennis的问题后(免责声明:我们一起工作,因此我有查看源代码的优势),我们发现了一个解决方案。
页面上有三个元素应该出现:一个出现在滚动上,而其他元素在滚动停止之前没有出现。我们确定scrollTop
位置正在更新并且是正确的,并且使元素出现的javascript正确执行。我们甚至删除了fadeIn
(替换为show
),以确保它不是延迟呈现问题。
原来是一个CSS问题。出于某种原因,我们能够通过将目标div包装在仅position:fixed
和z-index:1
的另一个div中来修复它。奇怪的是,我们试图显示的元素已经具有这些样式,但无论出于何种原因,添加包装器都会修复它。
例如:
<div class="showHideWrapper" style="position:fixed; z-index:1;">
<div class="header-bar-small" style="position:fixed; z-index:1;">
This should work.
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
//Header to appear on scroll
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 150) {
$('.showHideWrapper').fadeIn();
} else {
$('.showHideWrapper').fadeOut();
}
});
});
</script>
我们尝试剥离该元素的样式,或者将相同的行为应用于一个全新的元素,但是在我们完成上述操作之前它没有工作。设置position:relative
或position:absolute
没有完成这项工作,可能是因为子元素也已修复。
目前,做这样的事情可能对那些有类似问题的人有所帮助,但是如果有人能够对导致这种情况的原因提供明确的解释,那我就是全部。