1

我有 2 列。右栏是正常的可滚动内容窗格。带有类名的左侧列sticky是我试图在固定和静态定位之间切换的列。当您滚动右侧列直到结束时,它必须保持固定在视图中。当您到达右侧列的末尾(并且下一部分变得可见)时,stickydiv 的位置必须变为静态并随着页面正常滚动。以下部分必须以相同的方式(通常)滚动,直到它到达浏览器窗口的顶部,在该顶部sticky视图中的当前 div 更改为固定位置。

HTML:

<section>
    <div class="c-2 sticky"></div> /* Background image */
    <div class="c-2">
        <p>Any volume of content. Must cater for long and short pieces</p>
        ....
    </div>
</section>

CSS:

.content {
    width: 100%;
    overflow: hidden;
    float: left;
    padding-left: 130px;
    position: relative;
}

.c-2 {
    position: relative;
    width: 50%;
    left: 50%;
    overflow: hidden;
    background: #e4f;
}

    .c-2.sticky {
        background: url(img/holder.jpg) fixed top center no-repeat #fff;
        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover; 
        position: fixed;
        left: 0;
        width: 60%;
    }

JS是我跌倒的地方,我只是不知道如何开始这样做。我试过使用StickyKit但没有任何运气。我在这里有一个 JSFiddle:http: //jsfiddle.net/6HPX5/

4

2 回答 2

1

您好,请查看此演示并告诉我这样的内容是否是您想要的http://jsfiddle.net/6HPX5/130/然后我可以对此做出更好的解释.

于 2013-10-28T19:58:23.603 回答
0

您需要在新部分开始的位置放置一个“锚点”,然后使用 jQuery,您将希望查看此元素的位置,然后一旦确定锚点可见,请使用 jQuery(id).css () 选项来改变位置。

或者另一种选择是跟踪滚动,当左侧的元素需要移动时,使用动画将其移出屏幕。

更新

http://api.jquery.com/css/ - 更改位置属性。

http://api.jquery.com/scroll/ - 检测滚动

http://api.jquery.com/position/http://api.jquery.com/offset/ - 获取锚点的位置。

然后你添加这个:

jQuery(window).scroll(function(e) {
   //track scrolling
});
于 2013-10-28T16:15:59.457 回答