javascript之滚动经过特定 div 时更改菜单颜色

Terrylee 阅读：135 2026-05-17 15:37:00 评论：0

我试图让我的菜单粘在页面顶部，当我滚动某个 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但似乎不适合我谢谢! :)

请您参考如下方法:

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

标签:JavaScript

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。