페이지의 다른 div 앵커 위로 스크롤 할 때 탐색 텍스트 색상을 변경하는 방법

좋아요, 답변을 찾아서 이제는 몇 시간 동안 테스트 해보고 있습니다. 나는 여기에 또는 내 자신의 시행 착오를 통해 적절한 답변을 찾을 수 없기 때문에 이것이 중복되면 용서해주십시오. 여기에 도움이 필요한 것입니다 : 페이지의 다른 부분으로 스크롤 할 때 탐색 텍스트 색을 변경하려고합니다. 따라서 #firstpane id/div 위로 스크롤하면 내 탐색 바의 '정보'텍스트가 검은 색으로 표시됩니다. #secondpane id/div가 navbar 텍스트 위로 스크롤되면 'skills'이 검은 색이됩니다. # thirdpane id/div 위로 스크롤하면 내 navbar의 'contact'텍스트가 검은 색으로 변합니다. 그런 종류의 일이 내가 여기서 성취하려고하는 것입니다.페이지의 다른 div 앵커 위로 스크롤 할 때 탐색 텍스트 색상을 변경하는 방법

아무도 순수한 CSS 또는 자바 스크립트를 사용하지 않고 jQuery를 사용하는 방법을 알고 있습니까? jQuery에서 어떻게하는지에 대한 아이디어가 있습니다.이 인스턴스에서는 사용할 수 없으므로 jQuery를 제안하지 마십시오.

감사합니다.

body { 
 
    background-image: url("images/someTree.jpg"); 
 
    background-size: cover; 
 
    font-family: 'Roboto', sans-serif; 
 
    margin: 0; 
 
} 
 
header { 
 
    width: 100%; 
 
    height: 85px; 
 
    position: fixed; 
 
    overflow: hidden; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1000; 
 
    background-color: #96C339; 
 
} 
 
header h1#logo { 
 
    display: inline-block; 
 
    float: left; 
 
    font-family: "Monsterrat", sans-serif; 
 
    font-size: 40px; 
 
    color: #FFF; 
 
    font-weight: 400; 
 
    margin-left: 35px; 
 
} 
 
header nav { 
 
    display: inline-block; 
 
    float: right; 
 
} 
 
header nav a { 
 
    line-height: 100px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    color: #FFF; 
 
    font-weight: 700; 
 
    font-size: 20px; 
 
    text-decoration: none; 
 
} 
 
header nav a:hover { 
 
    color: #111; 
 
} 
 
@media all and (max-width: 600px) { 
 
    header h1#logo { 
 
    font-size: 30px; 
 
    display: block; 
 
    float: none; 
 
    margin: 0 auto; 
 
    height: 100px; 
 
    line-height: 55px; 
 
    text-align: center; 
 
    } 
 
    header nav { 
 
    display: block; 
 
    float: none; 
 
    height: 50px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    margin-top: -65px; 
 
    } 
 
    header nav a { 
 
    font-size: 15px; 
 
    line-height: 50px; 
 
    margin: 0 5px; 
 
    } 
 
} 
 
#firstpane { 
 
    background-color: #FFF; 
 
    margin-left: 0; 
 
    height: 100vh; 
 
    margin: auto; 
 
    opacity: 0.8; 
 
} 
 
#secondpane { 
 
    background-color: #FFF; 
 
    height: 100vh; 
 
    margin: auto; 
 
    margin-top: 6%; 
 
    opacity: 0.8; 
 
} 
 
#thirdpane { 
 
    background-color: #FFF; 
 
    height: 100vh; 
 
    margin: auto; 
 
    margin-top: 6%; 
 
    opacity: 0.8; 
 
} 
 
::selection { 
 
    background: #000; 
 
    /* WebKit/Blink Browsers */ 
 
} 
 
::-moz-selection { 
 
    background: #000; 
 
    /* Gecko Browsers */ 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1"> 
 
    <title>Portfolio Stuff</title> 
 
    <link rel="stylesheet" type="text/css" href="portfolio.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <header> 
 
     <h1 id="logo">Some Name</h1> 
 
     <nav> 
 
     <a href="#firstpane" class="firstpanenav">About</a> 
 
     <a href="#secondpane" class="secondpanenav">Skills</a> 
 
     <a href="#thirdpane" class="thirdpanenav">Contact</a> 
 
     </nav> 
 
    </header> 
 
    <!-- /header --> 
 
    <div id="firstpane"></div> 
 
    <div id="secondpane"></div> 
 
    <div id="thirdpane"></div> 
 
    <!-- end of container --> 
 
    </div> 
 
    <script type="text/javascript" src="portfolio.js"></script> 
 
</body> 
 

 
</html>

출처

2016-09-30 dannymac

당신은 자바 스크립트를 사용하여 시도 할 수 있습니다. 그렇게하기 위해서 간단히 window.onscroll을 사용하십시오 (스크롤 할 때마다 기능이 실행됩니다). 이 함수 내에서 마크 업의 특정 부분이 머리글 뒤에 있는지 확인해야합니다. 그렇다면 탐색에 클래스를 추가하기 만하면됩니다. 반면에, 원하는 요소가 원래 위치에 있다면 (또는 적어도 머리말 뒤에서는) 단순히 클래스를 클래스에서 제거하면됩니다.

코드는 다음과 같을 수 있습니다. 물론 당신은 또한 이것을 확장하여 첫 번째 및 세 번째 nav/div를 처리해야합니다. 그러나 최소한 나는 이것이 당신이 원하는 것을 성취하는데 당신을 도울 것이라고 생각합니다.

// Get the necessary elements first 
var skills = document.getElementsByClassName('secondpanenav')[0]; 
var second = document.getElementById('secondpane'); 

// Trigger event every time you scroll 
window.onscroll = function() { 
    // Get boundries of your div (top, bottom, left, right) 
    var position = second.getBoundingClientRect(); 

    // Check your divs position and add/remove your desired class 
    if (position.top < 85) { 
    skills.classList.add('redColor'); 
    } else { 
    skills.classList.remove('redColor'); 
    } 
}

데모 : https://jsfiddle.net/vw68eaqv/1/

출처

2016-09-30 11:14:16 Aer0

Sickkk! 나는 그것에 조금 해킹해야 할 것이다, 그러나 나는 다만 일반적인 생각을 원했다. 이것은 내가 필요한 시작이다. 하나의 질문입니다. 그 기능이 반복해서 실행되면 그 성능이 저하 될 것입니까? 난 네이티브 부드러운 스크롤과 가능한 시차를 구현하려고하는데, 그게 내가 U/i를 위해할만한 무거운 리프트의 나머지 부분이다. 최종 제품에 버그가 발생하지 않도록하십시오. 고맙습니다 @ Aer0, 감사합니다. – dannymac

죄송합니다. 성능에 얼마나 영향을 주는지 정말 모르겠습니다. 그러나 제가 아는 한, 이것은 다른 도서관에서도 일반적으로 사용되는 것입니다. 따라서 모든 스크롤에서 해고 되더라도 나쁜 실적으로 이어지지는 않을 것이라고 생각합니다. 이미 말했듯이, 나는 그 정보에 대해 100 % 확실하지 않습니다. 적어도 당신은 간단하게 시도 할 수 있습니다. :) – Aer0

페이지의 다른 div 앵커 위로 스크롤 할 때 탐색 텍스트 색상을 변경하는 방법

답변

관련 문제