Question

我有一个网页，要求图片在页面移动时向下滚动。为了在我的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的问题一无所知，无论它是分号还是某个地方的分号。

任何帮助都会有很大帮助。

Answer 1

你的“if”陈述应该括在括号中：

if(conditional_here){

  //if true

}else{

  //if not true

};

并使用Firebug检查任何此类问题或追溯脚本可能存在的任何错误代码/错误

当图像到达网页上的某个点时，删除固定类

1 个答案: