Change menu color when scrolled past certain div

StackOverflow https://stackoverflow.com/questions/23582080

문제

I'm trying to make my menu, that sticks on the top of the page, to change color when I passed scrolling a certain div.

I guess the problem lies in this line: var mainbottom = $('#main').offset().top + $('#main').height(); Because I get the error from chrome: Uncaught TypeError: Cannot read property 'top' of undefined Whats wrong?

Here is my code:

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

I got the code from here: http://codepen.io/taylorleejones/pen/KJsvz?editors=011 but doesn't seem to work for me Thanks! :)

도움이 되었습니까?

해결책

Your script is running before the DOM elements that it makes use of are rendered. Things like #main don't exist yet because your code is being executed as soon as it's parsed by the browser (unless you specifically ask it to wait) and what you are trying to access is undefined. Move the script tags in the body to the bottom of the body or use one of the many methods for delaying execution until the DOM loads.

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

or

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

or 

window.onload = function() {
//your code
};
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top