html - Can I "freeze" an element inside a scrollable DIV with just CSS (or something that looks good on mobile)? -

i'm going guess answer question "no," nice, i'm going ask anyways.

what i'm trying freeze element inside scrollable div such stays in place vertically. implement frozen row feature in table.

it's pretty easy javascript , absolute positioning. here's html container , 3 inner divs (see here 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 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 behaving way want. @ #fixeddiv. gets close i'm after, , suspect looks nicer on mobile devices because browser can hold in place without waiting run script. except (a) runs right on borders, , (b) doesn't scroll horizontally.

is there way i'm after pure css, run on mobile browser?

(in page, 1 way place frozen row above container div, number of frozen rows changes depending on user has scrolled to, meaning container div have move around.)

edit:

to sum up, want div that:

1. scrolls horizontally container
2. stays put when container scrolls vertically
3. looks belongs container
4. looks nice on mobile browser

the last 1 tricky bit. can achieve #1, #2, , #3 absolute-position div , javascript, looks ugly on mobile browser because lags. using fixed-position div, can #2 , #4, , can achieve #1 javascript (the lag doesn't bother me horizontally), not #3, because fixed-position div sits on top of container.

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

ok, haven't tested should along right track. gives ability create multiple "sticker" items html5 data attribute created data-special="sticker". jquery looks these, copies data , appends <div> element positioned original was, hides original.

#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">            want 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"); });     

let me know how works you, 1 downside once original element hidden, space used take collapsed... i'll try brainstorm solution that.

edit:

changed js #container width instead of original element width original element larger container.

edit:

tested: jsfiddle

some issues element overlap scroll bar, if knew width of subtract if value.

also check updated code above. there errors...