2

嗨，我想知道如何为其 3 列实现 facebook 效果，如果您检查，您可以像普通页面一样滚动页面，直到右列停止滚动，并且中心滚动继续这样做，那 3er 列在正常工作，为什么你可以滚动它直到它固定在页面上.. 我猜这是 javascript。正确的？

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

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

谢谢

4

1 回答 1

7

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

首先，您需要在以下位置设置页面模板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>
于 2013-09-12T23:42:02.557 回答