滚动经过某个 div 时更改菜单颜色答案

【问题标题】：Change menu color when scrolled past certain div滚动经过某个 div 时更改菜单颜色
【发布时间】：2014-06-28 05:23:36
【问题描述】：

我正在尝试制作粘贴在页面顶部的菜单，以便在我通过滚动某个 div 时更改颜色。

我猜问题出在这一行：var mainbottom = $('#main').offset().top + $('#main').height(); 因为我从 chrome 得到错误：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，但似乎对我不起作用谢谢！ :)

【问题讨论】：

代码在 jsfiddle 上运行良好：jsfiddle.net/nSA37。您确定代码中 jQuery 的路径正确吗？检查来源。

标签： javascript jquery scroll background-color typeerror

【解决方案1】：

您的脚本在它使用的 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
};

【讨论】：

前两个相同，$(function(){}); 是$(document).ready(); 的快捷方式。请注意 window.onload 与 document.onload，因为这些事件触发的时间有所不同。