如何垂直固定div元素？

我想垂直但不是水平固定的div元素。目前，我使用jQuery更新每次滚动发生时的位置top，但我不希望它看到移动。我希望它能够在不移动的情况下得到修复。有没有办法做到这一点？如何垂直固定div元素？

----------------- 
|   |  | 
|   |  | 
| div A | div B | 
|   |  | 
|   |  | 
|   |  | 
-----------------

向下滚动

----------------- 
| div A |  | 
|   |  | 
|   | div B | 
|   |  | 
|   |  | 
|   |  | 
-----------------

我希望能够保持Div B垂直固定的，而Div A滚动向下和向上。但是当我滚动左右时，我的手杖Div A和Div B移动。

我注意到Twitter使用类似的东西。一旦你点击推文，右侧显示推文详情的元素就会被真实地修复。我不知道他们是如何做到的。当向下滚动右侧面板时，请参见第二张图片。

enter image description here

2图像：

enter image description here

来源

2011-12-12 Sam

Twitter使用css属性：position: fixed;这肯定是最好的方式。

这正是它所说的，它修复了位置。通过使用top，right，bottom和left属性，您可以设置div的确切位置。

编辑13-12-11（真棒日期！）

属性position: fixed;不能影响在一个坐标轴的定位性能。这意味着，你不能向左或向右滚动，就像你想要的那样。

我强烈建议你应该避免超出屏幕宽度，使用元素宽度的百分比。你也可以坚持你的JavaScript。

但是，您可以先使用我建议的方法，但使用滚动事件侦听器更改左侧属性，以便在滚动时增加或减少左侧偏移量。因为jQuery的糟糕的跨浏览器支持，我会去jQuery。我认为你可以在原型库上做同样的事情，但是我对这个库不熟悉。

的jQuery（谷歌浏览器的工作）：

var offset = 400; // left offset of the fixed div (without scrolling) 

$(document).scroll(function(e) { 
    // b is the fixed div 
    $('.b').css({ 
     'left': offset - $(document).scrollLeft() 
    }); 
});

看一看在live demo

您可能需要将document对象更改为您选择的另一个对象或选择。

来源

2011-12-12 13:37:53

我用'position：fixed;'。它大部分时间都是有效的，但问题是，当你第一次打开页面时，如果“Div B”只显示了一半，而你想滚动到右侧看整个事物，它不会允许您。它将保持不变。 – Sam

山姆，请提供您的html代码，以便我们可以看到您正在尝试做什么 – Francisco

@Sam看看我的编辑，应该适合您 –

使用position:fixed的风格，并设置固定width为div。像素中还设置了top和left或right。

来源

2011-12-12 13:25:16 Pritom

这并没有回答这个问题：OP想知道如何保持右侧面板“固定”，所以如果视口滚动它保持在最前面。 – buddhabrot

设置风格为位置：固定，也许。和重点。也许我无法完全理解这个问题。 – Pritom

我的答案与答案下面的答案相同。我之前在我的评论中修正了它，现在修复了我的回答，但是为什么-1 ???????????? – Pritom

很多人都想要这样，但不幸的是，纯粹的CSS并没有提供完成这个非常简单，非常有用的任务的方法。我发现的唯一方法是给出div位置：固定的。但是，正如您发现的那样，这会修复x和y轴上的div。

在我看来，这是CSS的一大失败。我们确实需要像CSS位置这样的东西：fixed-x和position：fixed-y。我发现这样做的唯一方法是在SetInterval（）超时（我使用.10秒）上输入一段JavaScript代码，该代码重新定位需要更改的轴上的div。

在你的情况下（如果我正确地阅读你的问题），你会改变每个SetInterval（）tick的DivB的顶部：将DivB移动到你想要它在视口中的位置。容易做到，它的工作，只是一个不必要的痛苦。

您可能会问，也正确地说，为什么当滚动事件触发时，您（和我）无法进行此操作。答案是滚动事件不是在某些版本的IE中触发。

如果你可以使这取决于浏览器的滚动事件，这将是一个巨大的进步。

HTH。

来源

2011-12-12 14:06:54

这很容易用正确的标记和CSS完成。您需要一个容器（div，section等）来包含您的两个内容区域。在以下示例中，我利用JSFiddle呈现小提琴的内容的方式，但该技巧与JSFiddle之外的技术相同。

Live example.

首先，我们需要的标记：

<div id="container"> 
    <div id="divA"> 
     <p>This div will scroll.</p> 
    </div> 
    <div id="divB"> 
     <p>This div will not scroll.</p> 
    </div> 
</div>

之后，CSS：

#container { 
    height: 100%; 
    postition: relative; 
    width: 100%; 
} 

#divA { 
    background: #ccc; 
    height: 300%; /* So we can see scrolling in action */ 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 25%; 
} 

#divB { 
    background: #c55; 
    height: 100%; 
    position: fixed; 
    right: 0; 
    width: 75%; 
}

在这个例子中，我采取的事实，即的jsfiddle将创建一个查看有限大小的端口。因此，我可以用百分比来指定我的所有尺寸。

请注意，我将容器的位置设置为相对位置。这样我可以将divA和divB的位置模型设置为“绝对”和“固定”，以便它们将根据“容器”生成的方框进行定位。这是解决您的问题的关键部分。

来源

2011-12-12 14:42:46

如何垂直固定div元素？

回答

相关问题