滚动时将侧边栏框锁定到窗口顶部答案

【问题标题】：Locking Sidebar Boxes to Top of Window while Scrolling滚动时将侧边栏框锁定到窗口顶部
【发布时间】：2012-09-18 05:51:56
【问题描述】：

我正在尝试使用 jQuery 创建一个功能，您可以在侧边栏中的 div 上设置一个类（例如“密码箱”），当您滚动它们时它们将锁定到窗口顶部。

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

创建此类功能的最佳技术是什么？我对 jQuery 很熟悉，但我从来没有使用过 .offset() 之类的属性，所以我什至在构建这个接口的第一步都在苦苦挣扎。

提前感谢任何帮助！

【问题讨论】：

标签： jquery scroll fixed css-position

【解决方案1】：

我已经创建了一个工作小提琴。 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;
}

看看有没有帮助！

【讨论】：

哦，哇，这看起来真的很棒！今天晚些时候我将不得不再查看一下您的代码，但我还想将顶部 div 向上推，而不是重叠它。我确信可以对 JS 进行一些调整，但您的解决方案非常棒