Élément de Position fixé verticalement, absolu horizontalement

Je suis arrivé ici à la recherche d'une solution à un problème similaire, qui était d'avoir une barre de pied de page qui s'étend sur la largeur de la fenêtre et se trouve en dessous du contenu (hauteur et largeur variables). En d'autres termes, faire apparaître que le pied de page est "fixe" par rapport à sa position horizontale, mais conserve sa position normale dans le flux du document par rapport à sa position verticale. Dans mon cas, j'avais le texte de pied de page aligné à droite, donc il a fonctionné pour moi d'ajuster dynamiquement la largeur du pied de page. Voici ce que je suis venu avec:

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

(en utilisant 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"} )

Qui compile dans:

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

Cela fonctionne bien dans FireFox, et assez bien dans Chrome (c'est un peu nerveux); je n'ai pas essayé d'autres navigateurs.

Je voulais aussi que tout espace libre sous le pied de page soit d'une couleur différente, alors j'ai ajouté ceci 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;
}

Notez que pour que le div # footer-stretch fonctionne, tous les éléments parents jusqu'à l'élément body (et éventuellement l'élément html - pas sûr) doivent avoir une hauteur fixe (dans ce cas, height = 100%).

Après avoir beaucoup creusé (y compris ce post), je n'ai pas pu trouver une solution qui m'a plu. La réponse acceptée ici ne fait pas ce que le titre du PO lisait, et les meilleures solutions que j'ai pu trouver ont certes donné lieu à des éléments nerveux. Ensuite, il m'a frappé: avoir l'élément "fixe", détecter quand un défilement horizontal se produit, et le mettre à être absolument positionné. Voici le code résultant:

Voir comme un Code Stylo.

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's 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's 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's 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");
  }
});