Geek Answers Handbook

The position fixed in the container instead of the browser / viewport

I need to put a title that will be fixed inside the containing parent so that it runs when scrolling. The problem is that

position:fixed

captures the position of the browser, not the parent. This leads to the fact that when I have a container with horizontal scrolling for width overflow (the contents are larger than the container), my fixed header does not have overflow, as the contents of the table do.

See a demo of the script

So the goal here is to fix the position of the header, but fixed relative to its parent container. In this script, you can see that I commented on the css block:

 .container{ /*-webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);*/ -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; }

If you replace the current css block (with conversion equal to none) with the one that translateZ has, the header will be placed in its parent container, but will no longer be fixed.

Does anyone know how to solve this? Only CSS / HTML would be the preferred solution and avoid JS, but if nothing else, then JS, of course, I need with this!

+5
source share
3 answers

CSS cannot do it by itself.

Position: fixed works in relation to the viewport, but does not contain an element.

I saw an attempt to solve this problem using the CSS3 transform property, but (as you noted in your comment on my first answer) that doesn not seem to work.

I understand that you cannot use any client library, but this is the only solution available to my mind. For you and others that you might someday need, here is a solution that works. It uses a bit of jQuery:

Positioning an element inside another element with a positioned element fixed along the x and y axes (that is, the position is fixed horizontally and vertically).

http://jsfiddle.net/8086p69z/8/

HTML

 <div class="moving-article"> <div class="container"> <header class="fixed-header">FIXED HEADER</header> <ul> <li>SCROLL</li> <li>SCROLL</li> <li>SCROLL</li> </ul> </div> </div>

CSS (corresponding section)

 .moving-article { height: 150px; width: 75%; overflow-x: scroll; } .fixed-header { background: rgba(0,0,0,0.5); width: 50%; text-align: center; line-height: 40px; position: absolute; top: 0; left: 0; } .container{ width: 1000px; }

JQuery

 var leftOffset = parseInt($(".fixed-header").css('left')); $(window).scroll(function(){ $('.fixed-header').css({ 'left': $(this).scrollLeft() + leftOffset }); });
+2
source

To keep an element fixed inside the parent cannot be done using position: fixed , because position: fixed returns the element from the stream and therefore does not have a parent. It positions itself relative to the viewport.

To accomplish your task, while keeping everything simple and effective, you can consider Tether , "a client library for making absolutely positioned elements effectively attached to page elements."

Hope this helps. Good luck.

+1
source

set the title position to “absolute” and the parent container (which you want it to be relative) to “relative” and set it to stick to the top of the parent with “top: 0”

CSS

 .container { position: relative; } .child { position: absolute; top: 0; }
0
source

More articles:


All Articles