특정 div를 지난 후 스크롤 할 때 메뉴 색상을 변경하십시오.

특정 div를 스크롤 할 때 색상을 변경하기 위해 페이지 맨 위에 고정되는 메뉴를 만들려고합니다.특정 div를 지난 후 스크롤 할 때 메뉴 색상을 변경하십시오.

이 줄에 문제가 있다고 생각합니다. var mainbottom = $('#main').offset().top + $('#main').height(); 크롬에서 오류가 발생했기 때문에 : Uncaught TypeError: Cannot read property 'top' of undefined 뭐가 잘못 되었나요? http://codepen.io/taylorleejones/pen/KJsvz?editors=011을하지만 나를 위해 감사를 작동하지 않습니다

<!doctype html> 
<html lang="en-US"> 
<head> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
    <style type="text/css"> 
     .nav { 
      background-color:transparent; 
      color:#fff; 
      transition: all 0.25s ease; 
      position:fixed; 
      top:0; 
      width:100%; 
      background-color:#ccc; 
      padding:1em; 
     } 

     .nav.past-main { 
      background-color:#fff; 
      color:#444; 
     } 

     #main { 
      height:500px; 
      background-color:red; 
     } 

     #below-main { 
      height:1000px; 
      background-color:#eee; 
     } 
    </style> 
</head> 

<body> 
    <script type="text/javascript"> 
     var mainbottom = $('#main').offset().top + $('#main').height(); 

     $(window).on('scroll',function(){ 
      stop = Math.round($(window).scrollTop()); 
      if (stop > mainbottom) { 
       $('.nav').addClass('past-main'); 
      } 
      else { 
       $('.nav').removeClass('past-main'); 
      } 
     }); 
    </script> 

    <nav class="nav"> 
     <a href="#">link</a> 
    </nav> 
    <div id="main">#main</div> 
    <div id="below-main">#below-main</div> 

    <script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
</body> 
</html>

내가 여기에서 코드를 가지고 :

여기 내 코드입니다! :)

출처

2014-05-10 Ludo

코드는 jsfiddle에 잘 작동합니다. 코드에서 jQuery의 경로가 올바른지 확인하십시오? 소스를 확인하십시오. – lesssugar

사용중인 DOM 요소가 렌더링되기 전에 스크립트가 실행 중입니다. #main과 같은 것은 코드가 브라우저에서 구문 분석되는 즉시 실행되기 때문에 (아직 구체적으로 기다리지 않는 한) undefined입니다. 본문의 script 태그를 본문의 맨 아래로 이동하거나 DOM로드 될 때까지 실행을 지연시키는 여러 가지 방법 중 하나를 사용하십시오. http://jsfiddle.net/nSA37/ :

<body> 
    <nav class="nav"> 
     <a href="#">link</a> 
    </nav> 
    <div id="main">#main</div> 
    <div id="below-main">#below-main</div> 

    <script> 
     $(function() { 
      //your code 
      var mainbottom = $('#main').offset().top + $('#main').height(); 

      $(window).on('scroll',function(){ 

       stop = Math.round($(window).scrollTop()); 
       if (stop > mainbottom) { 
        $('.nav').addClass('past-main'); 
       } else { 
        $('.nav').removeClass('past-main'); 
       } 
      }); 
     }); 
    </script> 
</body>

또는

$(document.ready(function() { 
//your code 
});

또는

window.onload = function() { 
//your code 
};

출처

2014-05-10 14:38:28

니스! 하지만 document.ready 나 document.onload를 넣으면 작동을 멈춘다. – Ludo

첫 번째 2는 동일하며'$ (function() {});'은 $ (document) .ready();의 바로 가기이다. . 그리고'window.onload'와'document.onload'에주의를 기울여야합니다. –

특정 div를 지난 후 스크롤 할 때 메뉴 색상을 변경하십시오.

답변

관련 문제