有一些单页应用程序,用户可以在其中进行垂直滚动——但页面看起来暂停并水平滚动——然后清除一个部分。
我不确定他们是如何做到这一点的——我已经看到应用了变换样式,但不确定如果用户正常滚动,自然存在的元素会发生什么。
我添加了 jquery 任性函数来检测何时显示嵌套扩展。
类似这样的东西:
这是 HTML 片段。幻灯片 1 是一个完整的页面元素,幻灯片 5 和 6 也是如此。它们可以是菜单的 anchor 。我有兴趣在此处创建的行为 - 当用户接近嵌套单元时 - 它锁定在幻灯片 2 的顶部,然后转换幻灯片 3 和 4。
$win.on('scroll', function() {
var top = $win.scrollTop() / 3;
console.log("top", top);
$nested.css('transform', 'translate(' + -top + 'px, 0)');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">slide 1</div>
<div class="nested">
<div class="section first">slide 2</div>
<div class="section second">slide 3</div>
<div class="section third">slide 4</div>
</div>
<div class="section">slide 5</div>
<div class="section">slide 6</div>
JSFiddle Example
最佳答案
这只是为了让您了解如何实现它。你需要一个占位符容器
当您的幻灯片成为固定元素时,它会保留垂直空间。
下面的代码可以处理同一个页面中的多张幻灯片,也可以实现
一旦你有了想法,你自己的。
$('.nested').each(function() {
let $window = $(window), $body = $('body');
let $nested = $(this), $nestedPlaceholder = $nested.parent();
let verticalScrollRange, upperMargin, lowerMargin;
$window.resize(function(){
$nested.removeClass("sticky").css({left: 0});
let placeholderHeight = $nestedPlaceholder.css({height: ''}).height();
verticalScrollRange = placeholderHeight - $window.height();
upperMargin = $nestedPlaceholder.offset().top;
lowerMargin = upperMargin + verticalScrollRange;
$nestedPlaceholder.height(placeholderHeight);
});
$window.scroll(function() {
let scrollTop = $window.scrollTop();
if (scrollTop > upperMargin && scrollTop < lowerMargin) {
$nested.addClass("sticky");
let horizontalScrollRange = $nested.width() - $body.width();
let verticalScrollPosition = scrollTop - upperMargin;
let horizontalScrollPosition = verticalScrollPosition / verticalScrollRange * horizontalScrollRange;
$nested.css({left: -horizontalScrollPosition});
} else {
$nested.removeClass("sticky");
}
});
$window.resize();
});
body {
background: linear-gradient(to bottom, #ffcb77 0%, #deaaff 100%);
}
.section {
height: 100vh;
font-size: 5em;
text-align: center;
position: relative;
border: 1px solid red;
}
.nested .section {
width: 100vw;
}
.nested-placeholder {
overflow: hidden;
}
.sticky {
position: fixed;
z-index: 1;
top: 0;
height: 100vh;
white-space: nowrap;
}
.sticky .section {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">Start scrolling down!</div>
<div class="section">slide 1</div>
<div class="nested-placeholder">
<div class="nested">
<div class="section first">slide 2</div>
<div class="section second">slide 3</div>
<div class="section third">slide 4</div>
</div>
</div>
<div class="section">slide 5</div>
<div class="section">slide 6</div>
关于javascript - 自定义滚动动画 - 水平暂停部分和滚动元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56713668/