How do I prevent one of my parallax elements from shift out of place?

Question

The script functions in regard to the parallax effect but once the page is scrolled the 'logo' div immediately jumps to the left and I can't figure out how to remedy this. If possible I would like to know what is causing the conflict.

*the script is written at the bottom of the html.

html {
overflow:
}

body {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  margin: 0; /* remove default margin */
}

div#container{
  height: 100%;
  margin: 0;
}

div#static_nav {
  width: 100%;
  height: 2em;
  padding-top: 10px;
  position: fixed;
  z-index: 999;
}

.static_nav_full {
  background-color: #3A3D3F;
  transition: background-color 2s;
  opacity: .90;
}

.navbar{
  font-family: 'Source Sans Pro', sans-serif;
  padding-right: 20px;
  background-color: transparent;
  text-align: right;

}

div#static_nav a{
  color: white;
  text-decoration: none;
  padding-right: 20px;
}

div#block_one, div#block_two, div#block_three,
div#block_four{
  height: 100vh;
  z-index: 1;
}

div#block_one{
  background-image: url(https://images5.alphacoders.com/439/thumb-1920-439361.jpg);
  background-size: cover;
  background-attachment: fixed;
  transition: all 0.2s ease;

}

div#logo{
  background-image: url(https://cdn.pixabay.com/photo/2016/06/13/16/35/indian-1454621_1280.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
}

div#block_five{
  height: 30vh;
  background-color: #F5F5F5;
}

<!DOCTYPE html>

<html lang = "en">
<meta charset = "utf-8" />

<head>
  <link rel = "stylesheet" type = "text/css" href = "tof_css.css" />
  <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato|Kanit|Heebo|Source+Sans+Pro:200">

  <script src="finaljs.js"></script>
  <script src="smthscrll.js"></script>
</head>

<body>
  <div id = "container">

    <header>
      <div id = "static_nav">
        <nav class = "navbar">
          <a href = "#block_one">Home</a>
          <a href = "#block_two">About</a>
          <a href = "#block_four">People</a>
          <a href = "#block_five">Contact</a>
          <a href = "">Log In</a>
        </nav>
      </div>
    </header>


  <div id = "block_one">
    <div id = "logo">
    </div>
  </div>

  <div id = "block_two">
  </div>

  <div id = "block_three">
  </div>

  <div id = "block_four">
  </div>

  <div id = "block_five">
  </div>

</div>

<script type="text/javascript">

        (function() {

            var documentEl = $(document),
                blockone = $('#block_one');
                logo = $('#logo');

            documentEl.on('scroll', function() {
                var currScrollPos = documentEl.scrollTop();
                blockone.css('background-position', '0 ' + -currScrollPos/4 + 'px');
                logo.css('background-position', '0 ' + -currScrollPos/2 + 'px');
            });

          })();
        </script>
</body>
</html>

It jumps because you manipulate the position. (left is set to 0, top to the scrolling related). — axel.michel, Dec 26 '16 at 20:30

Jacques Cornat · Answer 1 · 2016-12-26T20:33:41.650

1

Scroll event is called only when you scroll, so first call the positioning function on page init, then your problem is solved :

(function() {

var documentEl = $(document),
    blockone = $('#block_one');
    logo = $('#logo');

setPosition();

documentEl.on('scroll', function() {
    setPosition();
});

function setPosition() {
    var currScrollPos = documentEl.scrollTop();
    blockone.css('background-position', '0 ' + -currScrollPos/4 + 'px');
        logo.css('background-position', 'center ' + -currScrollPos/2 + 'px');
    }

})();

Here an example

edited Dec 26 '16 at 20:33

answered Dec 26 '16 at 20:26

Jacques Cornat

1,612
1
19
34

Thank you for the help and the explanation! I know it was simple but I couldn't see it. Thanks again! – gwiz_kid Dec 26 '16 at 20:40

axel.michel · Accepted Answer · 2016-12-26T20:40:33.773

0

As mentioned in the comment above. It "jumps" because you let it jump. You manipulate the background-position (left value) to 0, you should instead manipulate it to something like:

function setPosition() {
    var currScrollPos = documentEl.scrollTop();
    blockone.css('background-position', '0 ' + -currScrollPos/4 + 'px');
    logo.css('background-position', 'center ' + -currScrollPos/2 + 'px')
}

I have updated the example.

edited Dec 26 '16 at 20:40

answered Dec 26 '16 at 20:34

axel.michel

5,764
1
15
25

Oh I understood the logo should be on the left haha, I correct :) – Jacques Cornat Dec 26 '16 at 20:35
@Citizen I believe his CSS value is the "correct" one an he wonders why it jumps to left. – axel.michel Dec 26 '16 at 20:38
Thank you for the help this makes sense! – gwiz_kid Dec 26 '16 at 20:42

How do I prevent one of my parallax elements from shift out of place?

2 Answers2