CODEWITHSUNDEEP
jqueryparallax
gwiz_kid
gwiz_kid

Reputation: 63

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

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>

Upvotes: 0

Views: 50

Answers (2)

axel.michel
axel.michel

Reputation: 5764

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.

Upvotes: 0

Jacques Cornat
Jacques Cornat

Reputation: 1642

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

Upvotes: 1

Related Questions