gpt4 book ai didi

javascript - 切换位置固定和静态

转载 作者:行者123 更新时间:2023-11-28 18:05:54 26 4
gpt4 key购买 nike

我有 2 列。右栏是一个普通的可滚动内容 Pane 。左侧列的类名 sticky 是我试图在固定定位和静态定位之间切换的列。当您滚动右手栏直到结束时,它必须保持固定在 View 中。当您到达右侧栏的末尾(下一部分变为可见)时,sticky div 的位置必须更改为静态并随页面正常滚动。接下来的部分必须以相同的方式(通常)滚动,直到它到达浏览器窗口的顶部, View 中的当前 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/

最佳答案

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

关于javascript - 切换位置固定和静态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19639639/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com