Jquery 滚动时将边栏框锁定到窗口顶部
我正在尝试使用jQuery创建一个功能,您可以在侧边栏中的div上设置一个类(例如“lockbox”),当您滚动经过div时,div将锁定在窗口顶部 但是我想在侧边栏中实现两个不同的框,当您滚动经过它们时,它们会相互推开。我能用的最好的比较是iPhone联系人应用程序,每个字母A-Z都有一个顶部锁定的标题栏。但当你滚动经过A时,该栏会被推出,以便B标题栏填写。下面是我所说内容的屏幕截图: 创建此类功能的最佳技术是什么?我熟悉jQuery,但我从未使用过像.offset()这样的属性,所以我甚至都在为构建这个接口的第一步而挣扎Jquery 滚动时将边栏框锁定到窗口顶部,jquery,scroll,fixed,css-position,Jquery,Scroll,Fixed,Css Position,我正在尝试使用jQuery创建一个功能,您可以在侧边栏中的div上设置一个类(例如“lockbox”),当您滚动经过div时,div将锁定在窗口顶部 但是我想在侧边栏中实现两个不同的框,当您滚动经过它们时,它们会相互推开。我能用的最好的比较是iPhone联系人应用程序,每个字母A-Z都有一个顶部锁定的标题栏。但当你滚动经过A时,该栏会被推出,以便B标题栏填写。下面是我所说内容的屏幕截图: 创建此类功能的最佳技术是什么?我熟悉jQuery,但我从未使用过像.offset()这样的属性,所以我甚至
提前感谢您的帮助 我制作了一把小提琴 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>
$(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});
}
});
});
});
#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;
}
看看是否有帮助 哦,哇,这看起来真不错!今天晚些时候,我将不得不进一步查看您的代码,但我还想将顶部div“向上”推,而不是重叠。我相信对JS进行一些调整是可能的,但是你的解决方案非常棒