gpt4 book ai didi

jquery - 滚动时将侧边栏框锁定到窗口顶部

转载 作者:行者123 更新时间:2023-12-01 04:19:03 26 4
gpt4 key购买 nike

我正在尝试使用 jQuery 创建一个功能,您可以在侧边栏中的 div 上设置一个类(例如“lockbox”),当您滚动经过它们时,它们将锁定到窗口顶部。

但我想在侧边栏中实现几个不同的框,当您滚动经过它们时,它们会相互推开。我可以使用的最好的比较是 iPhone 通讯录应用程序,每个字母 A-Z 都有一个锁定在顶部的标题栏。但是当您滚动经过 A 时,该栏会被推出以供 B 标题栏填充。这是我正在谈论的内容的屏幕截图:

contacts app screenshot

创建此类功能的最佳技术是什么?我熟悉 jQuery,但我从未使用过像 .offset() 这样的属性,所以我什至在构建这个界面的第一步上都遇到了困难。

提前感谢任何帮助!

最佳答案

我已经创建了一个工作 fiddle 。 Link .

HTML:

<html>
<head></head>
<body>
<div id="outer_div">
<div class="lockdiv">Div A</div>
<div class="lockdivcontent">
<div class="regular">Text A 1</div>
<div class="regular">Text A 2</div>
<div class="regular">Text A 3</div>
<div class="regular">Text A 4</div>
</div>
<div class="lockdiv">Div B</div>
<div class="lockdivcontent">
<div class="regular">Text B 1</div>
<div class="regular">Text B 2</div>
<div class="regular">Text B 3</div>
<div class="regular">Text B 4</div>
</div>
<div class="lockdiv">Div C</div>
<div class="lockdivcontent">
<div class="regular">Text C 1</div>
<div class="regular">Text C 2</div>
<div class="regular">Text C 3</div>
<div class="regular">Text C 4</div>
</div>
<div class="lockdiv">Div D</div>
<div class="lockdivcontent">
<div class="regular">Text D 1</div>
<div class="regular">Text D 2</div>
<div class="regular">Text D 3</div>
<div class="regular">Text D 4</div>
</div>
<div class="lockdiv">Div E</div>
<div class="lockdivcontent">
<div class="regular">Text E 1</div>
<div class="regular">Text E 2</div>
<div class="regular">Text E 3</div>
<div class="regular">Text E 4</div>
</div>
<div class="lockdiv">Div F</div>
<div class="lockdivcontent">
<div class="regular">Text F 1</div>
<div class="regular">Text F 2</div>
<div class="regular">Text F 3</div>
<div class="regular">Text F 4</div>
</div>
<div>
</body>
</html>​

Javascript:

$(document).ready(function() {

$('#outer_div').scroll(function(){

$('.lockdivcontent').each(function(){
var top = $(this).offset().top;
var lockdiv = $(this).prev();
if(top<lockdiv.height() && top>-1*($(this).height())) {
lockdiv.offset({top:1});
} else {
lockdiv.offset({top:top-lockdiv.height()-1});
}
});

});
});

CSS:

#outer_div {
width: 90%;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid lightgray;
padding: 0 10px;
}

.lockdiv {
width: 100%;
background-color: lightgray;
border: 1px solid;
height: 20px;
}

.regular {
width: 100%;
background-color: #FAFAFA;
height: 20px;
}

看看是否有帮助!

关于jquery - 滚动时将侧边栏框锁定到窗口顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12465534/

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