jQuery - DIV 以滚动动作移动并将位置固定到窗口的顶部和底部答案

【问题标题】：jQuery - DIV to move with scrolling motion and stick position to top and bottom of windowjQuery - DIV 以滚动动作移动并将位置固定到窗口的顶部和底部
【发布时间】：2012-03-13 08:01:25
【问题描述】：

可能已经有一个 jQuery 插件可以实现这一点，但我找不到一个完全符合我要求的插件。如果有，请指点我的教程，谢谢。

我的问题是我的页面内容很长，当您在页面底部附近滚动时，我的侧边栏不可见。

所以我想让我的#sidebar div 在您上下滚动页面时贴在浏览器窗口的顶部和底部。

我的侧边栏高度比你的典型屏幕分辨率长，所以我需要侧边栏的底部粘在浏览器窗口的底部以及浏览器的顶部。

所以当你开始向下滚动时，侧边栏会像往常一样滚动，但是当你到达最后侧边栏时，它会粘住并且不会滚动，当你开始向上滚动时，侧边栏会一直跟随到顶部侧边栏到达浏览器，然后它坚持。反之亦然。

这可能吗？

我创建了一个简单的设计布局jsfiddle，它是中心的。我在侧边栏添加了一个虚线边框，这样你现在应该把侧边栏放在哪里。

http://jsfiddle.net/motocomdigital/7ey9g/5/

任何建议，或者您知道在线教程或演示，都会非常棒！

更新

请看@Darek Rossman 的这次尝试

http://jsfiddle.net/dKDJz/4/

他的基本理念在起作用。但是向上滚动会导致它卡到顶部。我需要侧边栏在向上/向下滚动时保持流畅。但坚持窗口的顶部或底部。当页眉/页脚在视口中时，它也不应该被固定定位，因此它不会覆盖。

谢谢

【问题讨论】：

感谢您花时间为它创建一个 jsfiddle，让您可以更轻松地交流您正在尝试做的事情并提出实现。
这就是你所追求的吗？ jsfiddle.net/dKDJz/2
你有没有解决这个问题？我会很高兴侧边栏滚动到底部并一直保持到顶部回到页面顶部。
@steve，不，每个人似乎都认为这太棘手了。我会在下周给你一个文件或新的小提琴来玩。如果有人能弄清楚，那就太棒了。
这是我个人的上游演示清单。如果我有时间，我会和你比赛......

标签： javascript jquery scroll sticky

【解决方案1】：

我已经用我的解决方案更新了 jsfiddle。

var $sidebar = $("#sidebar"),
    $window = $(window),
    sidebartop = $("#sidebar").position().top;

$window.scroll(function() {

    if ($window.height() > $sidebar.height()) {
        $sidebar.removeClass('fixedBtm');
        if($sidebar.offset().top <= $window.scrollTop() && sidebartop <= $window.scrollTop()) {
            $sidebar.addClass('fixedTop');        
        } else {
            $sidebar.removeClass('fixedTop');
        }
    } else {
        $sidebar.removeClass('fixedTop');
        if ($window.height() + $window.scrollTop() > $sidebar.offset().top + $sidebar.height()+20) {
            $sidebar.addClass('fixedBtm');    
        }
                   
        if ($sidebar.offset().top < 0) {
            $sidebar.removeClass('fixedBtm');   
        }
    }
    
});

h1, h2 {
    display: block;
    font-weight: bold;
}

#horizon {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #cccccc;
    overflow: hidden;    
}

#header, #footer {
    width: 480px;
    height: auto;
    overflow: hidden;
    background: teal;
    padding: 10px;
    color: #ffffff;
}

#wrapper {
    width: 500px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
}

#content-wrapper {
    width: 100%;
    height: auto;
    overflow: hidden:
}

#content {
    width: 330px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    float: left;
    padding: 10px;
}

#sidebar {
    width: 130px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    float: left;
    clear: right;
    padding: 8px;
    background: #e5e5e5;
    border: 2px dashed red;
}

.fixedBtm {
    margin-left: 350px !important;
    position: fixed;
    bottom: 0;   
}

.fixedTop {
    margin-left: 350px !important;
    position: fixed;
    top: 0;   
}

.post {
    margin: 5px;
    width: 320px;
    background: red;
    float: none;
    overflow: hidden;
    min-height: 175px
}

.buttons li {
    margin: 5px;
    width: 120px;
    background: blue;
    float: none;
    overflow: hidden;
    min-height: 20px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
}

.buttons li:hover {
    background: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="horizon">

    <div id="wrapper">
        
        <div id="header">header</div>
        
        <div id="content-wrapper">
        
            <div id="content">
            
                <h1>Latest Posts</h1>
            
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
            
            </div>
        
            <div id="sidebar">
            
                <h2>Sidebar</h2>
            
                <ul class="buttons">
                    <li>Button 1</li>
                    <li>Button 2</li>
                    <li>Button 3</li>
                    <li>Button 4</li>
                    <li>Button 5</li>
                    <li>Button 6</li>
                    <li>Button 7</li>
                    <li>Button 8</li>
                    <li>Button 9</li>
                
                    <li>Button 10</li>
                    <li>Button 11</li>
                    <li>Button 12</li>
                    <li>Button 13</li>
                    <li>Button 14</li>
                    <li>Button 15</li>
                    <li>Button 16</li>
                    <li>Button 17</li>
                    <li>Button 18</li>
                </ul>
        
            </div>
                
        </div>
        
        <div id="footer">footer</div>
        
    </div>
    
</div>

当窗口大于侧边栏时，侧边栏应保持在顶部，当侧边栏较大时，侧边栏应固定在底部。

【讨论】：

【解决方案2】：

您不需要任何 jQuery 或 javascript。所有这些都可以在 CSS 中使用position: fixed 来实现。

将您的侧边栏选择器更改为以下内容

#sidebar {
    width: 130px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    clear: right;
    padding: 8px;
    background: #e5e5e5;
    border: 2px dashed red;
    position: fixed;
    right: 35px;
}

【讨论】：