Question

脚本功能与视差效果有关，但一旦页面滚动，'logo'dc立即向左跳转，我无法弄清楚如何解决这个问题。如果可能的话，我想知道造成冲突的原因。

*脚本写在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>

Answer 1

滚动事件仅在滚动时调用，因此首先调用init页面上的定位功能，然后问题就解决了：

(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');
    }

})();

这是example

Answer 2

如上面的评论所述。它＆＃34;跳跃＆＃34;因为你让它跳。您将背景位置（左侧值）操作为0，您应该将其操作为类似：

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

我更新了example。

如何防止我的一个视差元素移位？

2 个答案: