내 시차 요소 중 하나가 어긋나는 것을 방지하려면 어떻게합니까?

시차 효과와 관련하여 스크립트 기능이 있지만 페이지가 스크롤되면 '로고'div가 즉시 왼쪽으로 점프되며이 문제를 해결하는 방법을 알 수 없습니다. 가능한 경우 충돌을 일으키는 원인을 알고 싶습니다.내 시차 요소 중 하나가 어긋나는 것을 방지하려면 어떻게합니까?

* 스크립트는 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>

출처

2016-12-26 gwiz_kid

위치를 조작하기 때문에 점프합니다. (왼쪽은 0으로 설정되어 스크롤 관련 항목의 맨 위). –

위의 설명에서 언급 한 바와 같습니다. 당신이 뛰어 내리기 때문에 그것은 "점프"합니다.

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

나는 example를 업데이트 : 0으로 배경 위치 (왼쪽 값)를 조작하는 대신 같은 뭔가를 조작해야한다.

출처

2016-12-26 20:34:26

오, 나는 로고가 왼쪽 하하에 있어야한다는 것을 이해했다. 나는 정확하다. –

@Citizen 나는 CSS 값이 "올바른 것"이라고 믿는다. 왜 그가 왼쪽으로 점프하는지 궁금해한다. –

예, 고쳤습니다, thx;) –

스크롤 이벤트가 너무 첫 페이지 초기화에 위치 함수를 호출 만이라고, 당신의 문제는 해결된다 : 여기

(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

출처

2016-12-26 20:26:56

도움과 설명에 감사드립니다! 나는 그것이 단순하다는 것을 알고있다. 그러나 나는 그것을 볼 수 없었다. 다시 한 번 감사드립니다! –

내 시차 요소 중 하나가 어긋나는 것을 방지하려면 어떻게합니까?

답변

관련 문제