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>

Solution

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.