我怎样才能垂直固定div元素？ [英] How can I have vertically fixed div element?

问题描述

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

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

向下滚动

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

我希望能够垂直固定 Div B ，同时 Div A 向下滚动并向上滚动。但是，当我滚动到右侧和左侧时，我需要移动 Div A 和 Div B 。

我注意到Twitter使用类似的东西。一旦你点击推文，右侧显示推文详情的元素就会被真实地修复。我不知道他们是如何做到的。

第二张图：

解决方案

Twitter使用css属性： position：fixed; 这肯定是最好的选择。

它确实会修正这个位置。通过使用顶部，右边，底部和 left 属性，您可以设置div的确切位置。

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

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

我强烈建议你应该避免超过屏幕宽度，使用元素宽度的百分比。你也可以直接使用你的javascript。

然而，你可以先使用我建议的方法，但使用滚动事件侦听器更改左侧属性，这样当你滚动时，左侧偏移量会增加或减少。因为jQuery的糟糕的跨浏览器支持，我会去jQuery。我认为你可以对原型库做几乎相同的操作，但是我对该库不太熟悉。

jQuery（在google chrome中工作）：

  var offset = 400; （不滚动）
 $ b $（文档）.scroll（函数（e）{
 // b是固定div 
 $（' .b'）。css（{$ b $'left'：offset  -  $（document）.scrollLeft（）
}）; 
}）; 
  

查看现场演示

您可能需要更改文档对象到您选择的另一个对象或选择器。

I would like to have vertically but not horizontally fixed div element. Currently, I am using jQuery to update the position top every time scroll occurs, but I don't want it seeing moving. I would like it to be fixed without moving. Is there a way to do this?

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

Scrolling down

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

I would like to be able keep Div B vertically fixed while Div A scrolls down and up. But when I scroll to the right and left, I wand Div A and Div B to move.

I noticed that Twitter uses something similar. Once you click on a tweet, the element on the right that display the tweet detail, is veridically fixed. I am not sure how they are doing it. See the second image, when scrolling down the right panel stays fixed.

Second image:

解决方案

Twitter uses a css property: position: fixed; which sure is the best way to go.

This does exactly what it says it does, it fixes the position. By using the top, right, bottom and left properties you can set the exact position of your div.

---

Edit 13-12-11 (awesome date!)

The property position: fixed; can not influence a positioning property over one axis only. This means, that you can not scroll left or right, like you want to.

I highly suggest you should either avoid surpassing the screen width, using percentages for your element's width. You can also just stick to your javascript.

You could however go for the method I suggested at first, but change the left property using a scroll event listener so that when you scroll, the left offset is increased or decreased. Because jQuery's bad-ass cross-browser support I'd go for jQuery. I think you can do practically the same with the prototype library, but I'm not familiar with that library.

jQuery (worked in google chrome):

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()
    });
});

Have a look at the live demo

You might need to change the document object to another object or selector of your choice.

这篇关于我怎样才能垂直固定div元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！