ページが移動するときに画像を下にスクロールする必要がある Web ページがあります。私のcssでこれを行うために、そのクラスにfixedの位置値を割り当てました。ただし、ページにはフッターがあります。ページの一番下までスクロールすると、画像が重なってこのフッターの上に表示されます。jQueryを使用して、ページ上の画像の現在の位置を計算する関数を作成しようとしました。位置が特定のポイントを超えている場合は、そのポイントで停止し、ページを下に進めないようにします。ただし、私はjQueryに熟練していないため、まだ機能させていません。
HTML
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="example.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="scrollock.js"></script>
</head>
<body>
<header>
</header>
<nav>
<span class="navlinks">
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</span>
</nav>
//this is the image that needs to move down the page as the user scrolls but stop at a certain point//
<img class="map" src="Drawing.png" height="200px"></img>
<section>
</section>
<section>
</section>
<section>
</section>
//This is where the image needs to stop before//
<section id="contact">
</section>
</body>
</html>
CSS:
.map{
margin-top: 30px;
position: fixed;
}
#contact{
width: 100%;
height: 600px;
display: block;
background-image: url(line.png);
margin-top: 0px;
jquery:
$(function(){
var image = $('.map');
var top = $('.map').position.top();
if( top > 300 ){
image.css('position','absolute');
}else{
image.css('position','fixed');
};
});
セミコロンがどこかに欠けているのか、それとも何なのか、jqueryの何が問題なのか、私にはほとんどわかりません。
どんな助けでも大歓迎です。