0

ページが移動するときに画像を下にスクロールする必要がある 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の何が問題なのか、私にはほとんどわかりません。

どんな助けでも大歓迎です。

4

1 に答える 1