Question

当我通过滚动某个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但似乎对我不起作用谢谢！：）

Answer 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
};

滚动超过某个div时更改菜单颜色

1 个答案: