3

I'm going to guess the answer to this question will be "no," but it would be so nice, I'm going to ask anyways.

What I'm trying to do is freeze an element inside a scrollable DIV such that it stays in place vertically. This is to implement a frozen row feature in a table.

It's pretty easy to do with JavaScript and absolute positioning. Here's the HTML for a container and three inner DIVs (see here for the live version):

<div id="container">
  <div id="background">
    Content
  </div>
  <div id="absolutediv">
    Absolute stays inside
  </div>
  <div id="fixeddiv">
    Fixed escapes!
  </div>
  <div id="absolutediv2">
    Stays put!
  </div>
</div>

The relevant CSS:

#container {
  position: fixed;
  left: 20px;
  width: 250px;
  height: 250px;
  top: 20px;
  overflow: scroll;
}

#absolutediv {
  position: absolute;
  top: 30px;
  width: 300px;
  background-color: #CEC;
}

#fixeddiv {
  position: fixed;
  top: 100px;
  width: 300px;
  background-color: #ECC;
}

#absolutediv2 {
  position: absolute;
  width: 300px;
  top: 120px;
  background-color: #ECC;
}

And JavaScript that will hold #absolutediv2 in place:

var div = document.getElementById('absolutediv2');
var container = document.getElementById('container');

container.addEventListener('scroll', function() {
  div.style.top = container.scrollTop + 120 + 'px';
});

So #absolutediv2 is behaving the way I want. But look at #fixeddiv. This gets close to what I'm after, and I suspect it looks nicer on mobile devices because the browser can hold it in place without waiting to run the script. Except that it (a) runs right over the borders, and (b) doesn't scroll horizontally.

Is there any way to get what I'm after with pure CSS, something that would run well on a mobile browser?

(In my page, one way to do this would be to place the frozen row above the container DIV, but the number of frozen rows changes depending on where the user has scrolled to, meaning that the container DIV would have to move around.)

Edit:

To sum up, I want a div that:

  1. Scrolls horizontally with its container
  2. Stays put when its container scrolls vertically
  3. Looks like it belongs to its container
  4. Looks nice on a mobile browser

The last one is the tricky bit. I can achieve #1, #2, and #3 with an absolute-position div and JavaScript, but it looks ugly on a mobile browser because it lags. Using a fixed-position div, I can get #2 and #4, and I can achieve #1 with JavaScript (the lag doesn't bother me so much horizontally), but not #3, because a fixed-position div suddenly sits on top of its container.

Google has a suggestion for this kind of thing, but it's a pretty extreme solution: https://developers.google.com/mobile/articles/webapp_fixed_ui

4

2 回答 2

2

好的，我没有对此进行测试，但它应该是正确的。基本上，这使您能够使用我为您创建的 HTML5 数据属性创建多个“贴纸”项目data-special="sticker"。jQuery 查找这些，然后复制数据并将其附加到<div>位于原始位置的另一个元素，然后隐藏原始数据。

#container {
    position: fixed;
    left: 20px;
    width: 250px;
    height: 250px;
    top: 20px;
    overflow: scroll;
}

#original-element {
    position: absolute;
    top: 30px;
    width: 300px;
    background-color: #CEC;
}

.sticker {
    position:absolute;
}    

<div id="wrapper">
    <div id="container">
        <div id="background">
           Content
        </div>
        <div id="original-element" data-special="sticker">
           I want to stay put!
        </div>
    </div>
</div>

$("[data-special='sticker']").each(function () {
    $('#wrapper').append(
        $('<div/>').html($(this).html())
                   .addClass("sticker")
                   .css('top', parseInt($('#container').css('top')) + parseInt($(this).css('top')))
                   .css('left', $('#container').css('left'))
                   .css('width', $('#container').css('width'))
                   .css('background-color', $(this).css('background-color'))
    );
    $(this).css('display', "none");
});

让我知道它是如何为你工作的，还有一个缺点是一旦隐藏了原始元素，它曾经占用的空间就会崩溃......我会尝试为此集思广益。

编辑：

更改 JS 以获取#container宽度而不是原始元素宽度，因为原始元素大于容器。

编辑：

测试：jsfiddle

一些问题是元素也会与滚动条重叠，如果您知道滚动条的宽度，则可以从值中减去 if 。

还要检查上面的更新代码。有一些错误...

于 2013-05-08T16:50:27.377 回答
1

你可能想看看下面的帖子：

如本答案所述：

position: stickyChrome、Firefox 和 Safari 都支持无脚本替代方案。请参阅有关 HTML5Rocks 和演示的文章以及 Mozilla 文档。

截至今天，演示链接在 Firefox 中对我有效，但在 Chrome 中无效。

于 2017-01-10T17:12:39.703 回答