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

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

向下滚动

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

我想能够保持Div B垂直固定而Div A向下和向上滚动。 但是当我向右和向左滚动时,我会将Div ADiv B移动。

我注意到Twitter使用类似的东西。 单击推文后,右侧显示推文详细信息的元素已经过修复。 我不确定他们是怎么做的。 看到第二张图像,向下滚动右侧面板保持固定。

在此输入图像描述

第二张图片:

在此输入图像描述

===============>>#1 票数:7 已采纳

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

这完全符合它的说法,它确定了位置。 通过使用toprightbottomleft属性,您可以设置div的确切位置。


编辑13-12-11 (太棒了!)

物业position: fixed; 不能仅影响一个轴上的定位属性。 这意味着,您无法向左或向右滚动,就像您想要的那样。

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

但是,您可以首先使用我建议的方法,但使用滚动事件侦听器更改left属性,以便在滚动时,左侧偏移量增加或减少。 因为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()
    });
});

看看现场演示

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

===============>>#2 票数:4

很多人都想要这个,但遗憾的是纯CSS并没有提供一种方法来完成这个非常简单,非常有用的任务。 我找到的唯一方法是给出div位置:fixed。 但是,正如您所发现的,这会修复x和y轴上的div。

在我看来,这是CSS的一大失败。 我们真的需要CSS位置:fixed-x和position:fixed-y。 我发现这样做的唯一方法是在SetInterval()超时(我使用.10秒)上输入一段JavaScript代码,重新定位需要更改的轴上的div。

在你的情况下(如果我正确地阅读了你的问题)你将在每个SetInterval()勾选中更改顶部:DivB,将DivB向下移动到视口中想要的位置。 容易做,它的工作,只是一个不必要的痛苦。

您可能会问,并且正确地说,当滚动事件触发时,为什么您(和我)无法执行此操作。 答案是在某些版本的IE 中不会触发滚动事件。

如果你可以通过浏览器使这依赖于滚动事件,那将是一个巨大的进步。

HTH。

===============>>#3 票数:3

使用正确的标记和CSS可以轻松完成。 您需要一个容器( divsection等)来包含您的两个内容区域。 在下面的例子中,我利用JSFiddle呈现小提琴内容的方式,但该技术在JSFiddle之外是相同的。

实例。

首先,我们需要标记:

<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的位置模型设置为“绝对”和“固定”,这样它们将根据“容器”生成的框进行定位。 这是解决问题的关键部分。

===============>>#4 票数:0

使用position:fixed为样式并为div设置固定width 也设置像素的topleftright

  ask by Sam translate from so

未解决问题?本站智能推荐:

2回复

固定div仅垂直与jQuery

我想修复html页面左侧的div或图像,当滚动y时,图像滚动,但是当滚动x图像不滚动或左侧时,我使用jquery.sticky-kit.js和jquery-scrolltofixed.js插件,但是当页面调整为小宽度(移动尺寸)时,滚动x即可,请注意我的页面没有响应。 另一个注意事项是,m
1回复

限制固定div垂直滚动

我有2列布局,左侧有固定的侧边栏,而右侧则有页面内容。 我也有页脚。 我希望固定的侧边栏向右滚动到页面内容div末端的坐标。 但是,如果侧边栏的高度大于页面内容的高度,则需要自动为页面内容div分配新的高度。 此代码适用于第一种情况下(内容比侧边栏更高),但如果我重新载入页面一次(当
1回复

可能有一个带有水平溢出的垂直可滚动div?

我正在开发一个界面,该界面具有标准的仪表板布局,并且侧栏用作过滤器面板。 在此面板中,有一些组合框,用于选择各种过滤条件。 通常,某些选项太长而无法包含在侧边栏区域中,由于水平溢出,我无法看到整个选项名称。 此侧边栏已经是垂直可滚动的,并且我发现要看到侧边栏区域之外的选项的唯一方法是将溢出
4回复

两个DIVS,一种流体,一种固定的,固定的div(不考虑高度)在内部具有垂直居中的元素

据我所知。 到目前为止,无论高度如何,我都无法在右侧DIV中垂直居中图标。 当它达到最大长度时,我也无法使左DIV中的文本中断。 这是我所拥有的: http : //jsfiddle.net/SpSjL/1685/ 两个框应保持相同的高度,如果左侧有几行文字,右侧也应调整
1回复

如何在固定高度的div内将动态高度的图像垂直居中?

我正在使用固定高度和宽度的div内的可变高度的图像创建图像库。 我父母div的高度是460像素。 我希望所有小于460像素高度的图像在div的中心垂直对齐。 这是我的js代码: 我的HTML: 我的代码的问题是,如果我执行console.log('img height
3回复

当垂直滚动经过它时,绝对元素变得固定

我目前正在建立一个基于HTML,CSS和一点点Javascript / jQuery的网站。 (我对JavaScript很不好。从来没有真正尝试过学习它,只是复制代码。) 我正在尝试使用我的导航栏或“tabledesmatières”(网站是法语),这是一个position: absol
3回复

水平滚动时如何固定左div以及垂直滚动时如何固定顶部(类似于Excel)?

我想做一些像excel的事情。 垂直滚动时固定我的顶部标题,水平滚动时固定我的左侧“标题”。 这是我的嵌入样式和CSS之后的HTML http://jsfiddle.net/qDFn8/1/ HTML: CSS:
2回复

在垂直滚动中水平移动div中的元素

我想知道当用户在该div中垂直滚动时,是否可以在div中移动诸如图像之类的元素以严格地水平移动? 我可以想象有一个JavaScript解决方案,但我不知道那会是什么。
1回复

如何使div元素固定直到到达其他div

我为自己创建了一个网站,我希望浏览器窗口带有上边框,直到遇到下边框为止。 这是代码 .upperBorder { width: 100%; height: 40%; background-color: #EEECF5; -ms-transform: skewY(-5deg)
6回复

将元素垂直放置在div中

HTML代码 CSS代码 我希望div中的所有元素都应并排放置。 我想要这样的输出。 Hai你好(和图片) 这个怎么做? 我已在此处附加了演示文件