使用jQuery显示基于scrollTop位置的div

时间:2013-10-07 20:18:14

标签: javascript jquery html parallax scrolltop

整体概念

当我继续向下滚动页面时,不同div的css display属性将根据滚动的距离从none更改为block。可以看到我遇到问题的类似例子here。当用户滚动时,钱包“旋转”,这实际上只是图像变化。另一个例子是here

设计理论

  1. 获取scrollTop()编号,当达到该编号时,会将div的CSS属性从display:none更改为display:block;
  2. 获取包含不同图像的不同div的ID。
  3. 将每个特定图像设置为具有特定的scrollTop()编号,当到达时,它的显示设置将打开。
  4. 据我所知,这是怎么做的(虽然我不是医生,所以谁知道)。

    A Fiddle

    的jQuery

    $(document).ready(function() {
        function setImage(anImage, contentArea){
            $.when(contentArea == $(window).scrollTop()).then(function(){
                $(anImage).css('display', 'block');
            });
        }
        setImage('#bg1', 200);
        setImage('#bg2', 300);
        setImage('#bg3', 400);
    });
    

    我对这段代码的想法是:

    scrollTop() anImage值(包含图像的受尊重div)等于contentArea(scrollTop()值设置为当显示从无变为阻塞时的值时),则anImage的CSS值将更改为display:block。我并不担心删除上一张图片,因为新图片的z-index较高。

    HTML

    <div id="content">
        <div id="bg1"></div>
        <div id="bg2"></div>
        <div id="bg3"></div>
    </div>
    

    CSS

    html,body{height:100%;margin:0;}        
    #content{
        background:#333333;
        height:1500px;
        z-index:1;
    }
    #bg1{
        background:blue;
        height:400px;
        width:100%;
        z-index:2;
        position:fixed;
        top:200px;
        display:none;
    }
    #bg2{
        background:green;
        height:400px;
        width:100%;
        z-index:3;
        position:fixed;
        top:400px;
        display:none;
    }
    #bg3{
        background:red;
        height:400px;
        width:100%;
        z-index:4;
        position:fixed;
        top:400px;
        display:none;
    }
    

1 个答案:

答案 0 :(得分:0)

所以看看这个小提琴:http://jsfiddle.net/6XweD/2/

如果您注意到我将样式从display:none更改为opacity:0,以便函数$(this).height()正常工作,并且我在div的top位置做了一些调整。

希望这样可以正常工作:)