重新创建 3 列 facebook 风格的部分滚动，然后固定位置 CSS

Recreate 3 column facebook style parcial scrolling then fixed position CSS

本文关键字：滚动 然后 CSS 位置 定位 风格 新创建 创建 facebook      更新时间：2023-09-26
嗨，我想

知道如何实现其 3 列的 Facebook 效果，如果您检查，您可以像往常一样滚动页面，直到右列停止滚动，并且中心滚动继续这样做，右侧的 3er 列如何工作，为什么您可以滚动它直到它固定在页面上.. 我想这是 JavaScript。 对吧？

对于其余元素，我认为标题是固定的，这很清楚，但是 3er 列正在杀死我，因为我需要重新创建一个时间线（使用其他设计），但 3 列的想法相同。

有什么想法吗？我能找到的所有示例，都为 Rigth 列设置了一个固定位置，但在 facebook 中，正如我所说，您可以滚动直到第 3 列固定，我想我不知道，这就是我问的原因。

谢谢

一旦你把它分解成几个步骤，这并不难......

首先，您需要在html中设置页面模板：

<div class="head">
    <!-- HEAD CONTENT GOES HERE -->
</div>
<div class="main">
    <div class="left">
        <!-- LEFT BAR CONTENT GOES HERE -->
    </div
    ><div class="right">
        <!-- RIGHT BAR CONTENT GOES HERE -->
    </div>
</div>

然后，您需要按照您希望它的外观设置样式css：

html, body{
    margin:0;
    padding:0;
}
.head{
    height:30px;
    width:100%;
    background:#3B5998;
    position:fixed;
    top:0;
    left: 0;
    z-index:1000;
}
.main{
    padding:30px 10px 5px;
    max-width:1200px;
    margin:auto;
}
.left{
    vertical-align:top;
    width:80%;
    display:inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background:#eee;
}
.right{
    vertical-align:top;
    width:20%;
    display:inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background:#ccc;
}

然后，您需要了解完成这项工作所需的条件...

首先，您需要了解：

  1. 观察窗的高度
  2. 窗口滚动到的高度
  3. 右栏的高度

这个想法是让右栏（.right）与页面的其余部分一起滚动（就像上面的普通html和css一样），直到到达.right的末尾。

从数学上讲，这将在以下情况下发生：

window_height + scroll_height == right_bar_height

现在您知道何时需要开始停止.right滚动，您可以将其插入 if 语句并添加自定义css以固定正确的栏。

要将.right固定在正确的位置，您需要知道：

  1. 窗口的高度
  2. .right的高度
  3. .right的宽度
  4. .right在查看窗口中的左偏移量

然后，将css属性与js一起应用于正确的位置，以将.right固定在正确的位置。那就是position、top、left和width。

  1. 您可以设置position: fixed以便将.right从页面流中删除。
  2. 将left设置为偏移量和.left宽度.left之和
  3. 将top设置为window_height - right_bar_height但前提是.right高于窗口
  4. 将width设置为所需的宽度。在这种情况下，20%的.main

然后，您需要在每次页面scrolls或resizes时应用上述计算，因此最好将其作为可以在任一事件中调用的函数。

function rightBarControl(){
    var windowHeight = $(window).height();
    var scrollHeight = $(window).scrollTop();
    var rightBarWidth = $('.main').width()*.2 //20% of .main width
    var rightBarHeight = $('.right').outerHeight();
    var rightBarOffset = $('.left').offset().left + $('.left').outerWidth();
    var rightBarTop = 30; //30 because .head is 30px high
    if(windowHeight - 30 < rightBarHeight){ //Again including 30 because of .head
        rightBarTop = windowHeight - rightBarHeight;
    }
    if((windowHeight + scrollHeight) >= rightBarHeight){
        $('.right').css({
            position:'fixed',
            left: rightBarOffset,
            top: rightBarTop,
            width: rightBarWidth
        })
    }
    else{
         $('.right').css({
            position: 'static',
            left: '',
            top: '',
            width: '20%'
        })
    }
}
$(window).scroll(rightBarControl); //Run control on window scroll
$(window).resize(rightBarControl); //Run control on window resize

请注意，此用法jquery因此您需要将其包含在上述脚本之前，如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
相关文章：