Best IT Recipes

Position element fixed vertically, horizontal absolute

Here is what I am trying to accomplish:

I need a button that is located at some distance from the right side of the div and is always at the same distance from the side of the div regardless of the size of the viewport, but it will scroll with the window.

Thus, x pixels on the right side of the div are always, but y pixels are always from the top of the viewport.

Is it possible?

+53
css position
Jul 21 '10 at 19:45
source share
3 answers

Position a fixed element horizontally based on another element

( Disclaimer : The solution proposed here is not technically an “ absolute horizontal value ” as indicated in the title of the question, but has reached the point where OP was originally required, the fixed position element is “X”, the distance from the other’s right edge, but fixed in its vertical scrolling.)

I like these css issues. As a proof of concept, yes, you can get what you want . You may need to tweak some things for your needs, but here are a few examples of html and css that were passed by FireFox, IE8 and IE7 (IE6, of course, doesn't have position: fixed ).

HTML:

 <body> <div class="inflow"> <div class="positioner"><!-- may not be needed: see notes below--> <div class="fixed"></div> </div> </div> </body>

CSS (borders and all sizes for demonstration):

 div.inflow { width: 200px; height: 1000px; border: 1px solid blue; float: right; position: relative; margin-right: 100px; } div.positioner {position: absolute; right: 0;} /*may not be needed: see below*/ div.fixed { width: 80px; border: 1px solid red; height: 100px; position: fixed; top: 60px; margin-left: 15px; }

The key is to not set left or right at all for the horizontal on div.fixed , but use two wrapper dividers to set the horizontal position. div.positioner is not required if div.inflow is a fixed width, since the left margin of div.fixed can be set to the known width of the container. However, if you want the container to have a percentage width, you'll need div.positioner to first click div.fixed on the right side of div.inflow .

Edit: As an interesting note, when I set overflow: hidden (if you need to do this) on the div.inflow did not affect the fixed position of the div outside other boundaries.Apparently, a fixed position is enough to get it out of the containing div for the overflow context .

+40
Jul 21 '10 at 21:17
source share
— -

I came here to find a solution to a similar problem, which should have a footer that spans the width of the window and is below (variable height and width) content. In other words, make sure that the footer is “fixed” relative to its horizontal position, but retains its normal position in the document flow relative to its vertical position. In my case, I had the text of the footer aligned right, so for me, dynamically adjusting the width of the footer. Here is what I came up with:

HTML

 <div id="footer-outer"> <div id="footer"> Footer text. </div><!-- end footer --> </div><!-- end footer-outer -->

CSS

 #footer-outer { width: 100%; } #footer { text-align: right; background-color: blue; /* various style attributes, not important for the example */ }

CoffeeScript / JavaScript

(Using prototype.js).

 class Footer document.observe 'dom:loaded', -> Footer.width = $('footer-outer').getDimensions().width Event.observe window, 'scroll', -> x = document.viewport.getScrollOffsets().left $('footer-outer').setStyle( {'width': (Footer.width + x) + "px"} )

which compiles to:

 Footer = (function() { function Footer() {} return Footer; })(); document.observe('dom:loaded', function() { return Footer.width = $('footer-outer').getDimensions().width; }); Event.observe(window, 'scroll', function() { var x; x = document.viewport.getScrollOffsets().left; return $('footer-outer').setStyle({ 'width': (Footer.width + x) + "px" }); });

This works great in FireFox, and pretty good in Chrome (this is a little annoying) I have not tried other browsers.

I also wanted any free space below the footer to be a different color, so I added this footer-stretch div:

HTML

 ... </div><!-- end footer --> <div id="footer-stretch"></div> </div><!-- end footer-outer -->

CSS

 #footer-outer { height: 100%; } #footer-stretch { height: 100%; background-color: #2A2A2A; }

Please note that for the # footer-stretch div to work, all parent elements prior to the body element (and possibly the html element are not sure) must have a fixed height (in this case, height = 100%).

+7
Jun 27 '12 at 4:16
source share

After much digging (including this post), I could not find a solution that I liked. The accepted answer here does not do what the name OP reads, and the best solutions that I could find admittedly led to leaps. Then it hit me: let the element be “fixed”, detect when horizontal scrolling occurs, and switch it so that it is absolutely positioned. Here is the resulting code:

Browse it like a Pen Pen.

HTML

  <div class="blue"> <div class="red"> </div> </div>

CSS

 /* Styling */ .blue, .red { border-style: dashed; border-width: 2px; padding: 2px; margin-bottom: 2px; } /* This will be out "vertical-fixed" element */ .red { border-color: red; height: 120px; position: fixed; width: 500px; } /* Container so we can see when we scroll */ .blue { border-color: blue; width: 50%; display: inline-block; height: 800px; }

Javascript

 $(function () { var $document = $(document), left = 0, scrollTimer = 0; // Detect horizontal scroll start and stop. $document.on("scroll", function () { var docLeft = $document.scrollLeft(); if(left !== docLeft) { var self = this, args = arguments; if(!scrollTimer) { // We've not yet (re)started the timer: It the beginning of scrolling. startHScroll.apply(self, args); } window.clearTimeout(scrollTimer); scrollTimer = window.setTimeout(function () { scrollTimer = 0; // Our timer was never stopped: We've finished scrolling. stopHScroll.apply(self, args); }, 100); left = docLeft; } }); // Horizontal scroll started - Make div absolutely positioned. function startHScroll () { console.log("Scroll Start"); $(".red") // Clear out any left-positioning set by stopHScroll. .css("left","") .each(function () { var $this = $(this), pos = $this.offset(); // Preserve our current vertical position... $this.css("top", pos.top) }) // ...before making it absolutely positioned. .css("position", "absolute"); } // Horizontal scroll stopped - Make div float again. function stopHScroll () { var leftScroll = $(window).scrollLeft(); console.log("Scroll Stop"); $(".red") // Clear out any top-positioning set by startHScroll. .css("top","") .each(function () { var $this = $(this), pos = $this.position(); // Preserve our current horizontal position, munus the scroll position... $this.css("left", pos.left-leftScroll); }) // ...before making it fixed positioned. .css("position", "fixed"); } });
+6
Aug 7 '14 at 18:23
source share


More articles:


All Articles