脚本功能与视差效果有关,但一旦页面滚动,'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>
答案 0 :(得分: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
答案 1 :(得分:0)
如上面的评论所述。它&#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。