如何在香草JS中将go锚定在滚动上？

Question

我想在我正在处理的页面上添加效果。 在它上面有一个带有固定图像的封面，然后是一个容器。 我想做的是让页面在用户用鼠标滚动时用固定图像滚动。

我认为这样的事情非常简单，因为当我输入onclick而不是onscroll时它可以工作，但它当然不起作用：

<div class="cover" onscroll="window.location = '#container';">
    ...
</div>

<div class="container" id="container">
    ...
</div>

基本上我想要这样的东西，但图像保持在同一个地方和相同的大小： https://tympanus.net/Development/ArticleIntroEffects/

有人有解决方案吗？

谢谢！

Answer 1

您需要做的就是Element.scrollTo ( MDN )，就像这样：

let container = document.getElementById('container');
document.onwheel = function(e) {
  document.body.parentNode.scrollTo({
    top: container.offsetTop,
    left: 0,
    behavior: 'smooth'
  });
};

它滚动您的<html>元素，因此您的#container 将位于屏幕顶部

Answer 2

我试过这个，它正在滚动到容器，但它非常慢（并且没有找到如何更改持续时间），并且之后不会移动。

let cover = window.innerHeight
window.addEventListener('scroll', function () {
    window.scrollTo({
        top: cover,
        left: 0,
        behavior: 'smooth'
    });
})

如果有人有解决方案:)

Answer 3

我终于找到了一个解决方案，对于那些感兴趣的人：HTML：

<div class="cover" id="cover">
    ...
</div>

<div class="container" id="container">
    ...
</div>

Sass：

=full
    width: 100%
    height: 100%

* 
    box-sizing: border-box
    margin: 0
    padding: 0

.cover
    width: 100%
    height: 100vh
    float: left
    +transition(all, 1s, ease)
    overflow: hidden

    &.cover-close
        height: 0

JS：

var scrollPosition = window.scrollY;
var cover = document.getElementsByClassName("cover")[0];

window.addEventListener("scroll", function () {
    scrollPosition = window.scrollY;

    if (scrollPosition >= 1) {
        cover.classList.add("cover-close");
    } else {
        cover.classList.remove("cover-close");
    }
});

我在这里做了一支笔： https://codepen.io/julien_sebag/pen/yLYWaRJ

如何在香草JS中将go锚定在滚动上？

问题描述

3 个解决方案

解决方案1
1 2020-05-26 15:13:26

解决方案2
0 2020-05-26 18:46:32

解决方案3
0 2020-05-27 11:33:22

如何在香草JS中将go锚定在滚动上？

问题描述

3 个解决方案

解决方案1 1 2020-05-26 15:13:26

解决方案2 0 2020-05-26 18:46:32

解决方案3 0 2020-05-27 11:33:22

解决方案1
1 2020-05-26 15:13:26

解决方案2
0 2020-05-26 18:46:32

解决方案3
0 2020-05-27 11:33:22