1

I'd like to add an effect on a page that I'm working on. On it there's a cover with a fixed image and after there's a container. What I'd like to do would be to have the page scrolling with the fixed image just when the user scrolls with his mouse.

I thought something really simple like that, since it works when I put onclick and not onscroll but of course it doesn't work:

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

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

Basically I'd like something like that, but with the image staying at the same place and the same size: https://tympanus.net/Development/ArticleIntroEffects/

Someone has a solution?

Thanks!

Improve this question
3
  • Not entirely sure if I get you, but I think CSS scroll snap is something that's potentially interesting (check compatibility though).
    – roye7777777
    Commented May 26, 2020 at 14:58
  • onscroll runs when content within the element scrolls, so unless there is content inside of that div, that will never get called. It's a bit confusing what you want. It sounds like you just want to have a fixed background image (since you want it to stay "in the same place and the same size"), but then you show this completely different effect...
    – Heretic Monkey
    Commented May 26, 2020 at 15:04
  • Yes I'm showing something a bit different because it was the closest animation I found... But yes I just would like to have the background with a fixed position. Inside the div there's some content (a <img> tag)
    – user10924567
    Commented May 26, 2020 at 15:16

3 Answers 3

Reset to default
1

All you need to do is Element.scrollTo(MDN) just like this:

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

It scrolls your <html> element so your #container would be on top of the screen

Improve this answer
2
  • Thanks for your answer. I tried it but it scrolls the page on load and not on scroll. How could I do that? (Sorry I'm really bad in JS...)
    – user10924567
    Commented May 26, 2020 at 15:24
  • With your link I tried something like that: ``` function scrollCover() { window.scrollTo({ top: window.innerHeight, left: 100, behavior: 'smooth' }); } ``` It seems to do the same thing (scrolling to the container) but it just does it on load of the page and not when user scrolls. How could I do that?
    – user10924567
    Commented May 26, 2020 at 15:34
1

I finally found a solution, for those interested: 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");
    }
});

I made a pen here: https://codepen.io/julien_sebag/pen/yLYWaRJ

Improve this answer
0

I tried this, it's scrolling to the container but it's super slow (and didn't find how I could change the duration), and does not move after.

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

If someone has a solution :)

Improve this answer