当滚动某些div时更改菜单颜色

我想让我的菜单粘贴在页面顶部，当我通过滚动某个div时更改颜色。当滚动某些div时更改菜单颜色

我想问题出在这一行：var mainbottom = $('#main').offset().top + $('#main').height(); 因为我得到铬的错误：Uncaught TypeError: Cannot read property 'top' of undefined什么错了？

这里是我的代码：

<!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>

我得到了代码从这里：http://codepen.io/taylorleejones/pen/KJsvz?editors=011但似乎并没有为我工作谢谢！ :)

来源

2014-05-10 Ludo

代码适用于精细的jsfiddle：http://jsfiddle.net/nSA37/。你确定你的代码中的jQuery路径是正确的吗？检查来源。 – lesssugar

您的脚本在呈现它所使用的DOM元素之前正在运行。像#main之类的东西还不存在，因为您的代码在浏览器解析后立即执行（除非您特别要求它等待），而您试图访问的是undefined。将体内的script标签移动到主体的底部，或者使用其中一种方法延迟执行，直到DOM加载。

<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

前两个是相同的''（function（）{}）;''是$（document）.ready（）的快捷方式;'' 。并且要小心'window.onload'和'document.onload'，因为在这些事件触发时存在差异。 –

当滚动某些div时更改菜单颜色

回答

相关问题