特定の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が読み込まれるまで実行を遅らせるための多くの方法の1つを使用します。
<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
};
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加