Javascript - divs overlaying div on scroll issue

Question

I have full screen divs that overlay each other on scroll, I have also added a full screen background image. But on chrome I have issues when I scroll back all the way to the top, the backround goes down by a little, and in safari when I start scrolling down the same thing happens. I have made a fiddle here . You can see there how when you after you scroll down, when you go all the way up again, the content of the panel overlaps. It is a different effect in chrome, there you can see a background image going down a bit when you start scrolling down.

It is the background-image animation that messes up the things, if I don't use it everything works fine.

#bg {
  background-image: url('https://unsplash.it/800?random');
  background-size: cover;
  z-index: -1;
  animation: zoom 10s;
  height: 100%;
  width: 100vw;
  position: absolute;
  -webkit-animation-fill-mode: forwards;
  background-attachment: fixed;
}

@keyframes zoom {
  0% { transform:scale(1,1); }
  100% { transform:scale(1.1,1.1);}
}

So I wonder how can I use the animation and keep the same effects that I have on the page?

This is the html:

<body>
  <div id="bg">
  </div>
  <div class="panel panel-one">
    <div class="panel-inner">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
    </div>
</div>

<div class="panel panel-two">
    <div class="panel-inner">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
    </div>
</div>

<div class="panel panel-three">
    <div class="panel-inner">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
    </div>
</div>


</body>

And the script that takes care of scrolling:

$(function() {

    // Set up vars
    var _window = $(window),
        panels = $('.panel'),
        panelsY = [];

    // Cache position of each panel
    $.each(panels, function(i, el) {
        panelsY.push(panels.eq(i).offset().top);
    });

    // Bind our function to window scroll
    _window.bind('scroll', function() {
        updateWindow();
    });

    // Update the window
    function updateWindow() {
        var y = _window.scrollTop();

        // Loop through our panel positions
        for (i = 0, l = panels.length; i < l; i++) {
            /*
                Firstly, we break if we're checking our last panel,
                otherwise we compare if he y position is in between
                two panels
            */
            if ((i === l - 1) || (y >= panelsY[i] && y <= panelsY[i+1])) {
                break;
            }
        };

        // Update classes
        panels.not(':eq(' + i + ')').removeClass('panel-fixed');
        panels.eq(i).addClass('panel-fixed');
    };

});

Answer 1

I added a margin: 0 to the html, body rule and changed to position: fixed on the #bg .

Will this updated fiddle work?

CCS changed

#bg {
  background-image: url('https://unsplash.it/800?random');
  background-size: cover;
  z-index: -1;
  animation: zoom 10s;
  height: 100%;
  width: 100vw;
  position: fixed;
  -webkit-animation-fill-mode: forwards;
  background-attachment: fixed;
}

@keyframes zoom {
  0% { transform:scale(1,1); }
  100% { transform:scale(1.1,1.1);}
}

html, body {
  margin: 0;
  height: 100%;
}

If not, then this one animate the background size instead of scaling, which appears to be the reason

Updated fiddle

CSS changed

#bg {
  background: url('https://unsplash.it/800?random') no-repeat center center fixed;
  background-size: 100% 100%;
  z-index: -1;
  animation: zoom 10s;
  height: 100vh;
  width: 100vw;
  position: absolute;
  -webkit-animation-fill-mode: forwards;
}

@keyframes zoom {
  0% { background-size: 100% 100%; }
  100% { background-size: 120% 120%;}
}

html, body {
  margin: 0;
  height: 100%;
}

Answer 2

it because of 'body'. please add this code to your style sheet.

body {
    padding: 0;
    margin: 0;
}

You have to use CSS reset snippet.

I hope this help.

Javascript - divs overlaying div on scroll issue

Question

2 answers

solution1
1 ACCPTED 2016-10-30 10:07:45

solution2
0 2016-10-30 10:19:42

Javascript - divs overlaying div on scroll issue

Question

2 answers

solution1 1 ACCPTED 2016-10-30 10:07:45

solution2 0 2016-10-30 10:19:42

solution1
1 ACCPTED 2016-10-30 10:07:45

solution2
0 2016-10-30 10:19:42