Позиционный элемент фиксирован вертикально, абсолютный по горизонтали

Вот что я пытаюсь сделать:

Мне нужна кнопка, которая расположена на некотором расстоянии от правой части div и всегда находится на том же расстоянии от стороны div независимо от размера windows просмотра, но будет прокручиваться с окном.

Таким образом, это x пикселей с правой стороны div всегда, но y пикселей от вершины порта просмотра в любое время.

Это возможно?

Положение фиксированного элемента горизонтально основано на другом элементе

( Отказ от ответственности Примечание . Предлагаемое здесь решение не является технически « абсолютным по горизонтали », как указано в названии вопроса, но достигло того, что первоначально требовалось OP, элемент фиксированной позиции был «X» расстоянием от правого края другого, но зафиксирован в его вертикальная прокрутка.)

Мне нравятся эти проблемы css. Как доказательство концепции, да, вы можете получить то, что хотите . Возможно, вам придется подстроить некоторые вещи для ваших нужд, но вот несколько примеров html и css, которые передавали FireFox, IE8 и IE7 (у IE6, конечно, нет position: fixed ).

HTML:

  

CSS (границы и все размеры для демонстрации):

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

Ключ состоит в том, чтобы не устанавливать left или right вообще горизонтальное значение на div.fixed но использовать два div.fixed обертки для установки горизонтального положения. Элемент div.positioner не нужен, если div.inflow является фиксированной шириной, так как левое поле div.fixed может быть установлено на известную ширину контейнера. Однако, если вы хотите, чтобы контейнер имел процентную ширину, вам понадобится div.positioner чтобы div.fixed в правую часть div.inflow .

Редактирование: как интересная заметка, когда я устанавливаю overflow: hidden (если нужно это делать) в div.inflow не влияет на фиксированную позицию div вне границ другого. По-видимому, фиксированной позиции достаточно, чтобы вывести ее из контекста содержащего div для overflow .

Я приехал сюда искать решение аналогичной проблемы, которая должна была иметь нижний колонтитул, который охватывает ширину windows и находится ниже (переменной высоты и ширины). Другими словами, убедитесь, что нижний колонтитул «фиксирован» относительно его горизонтального положения, но сохраняет свое нормальное положение в streamе документа относительно его вертикального положения. В моем случае у меня был текст нижнего колонтитула, выровненный по правому краю, поэтому для меня динамическая настройка ширины нижнего колонтитула. Вот что я придумал:

HTML

  

CSS

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

CoffeeScript / JavaScript

(Использование 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"} ) 

который компилируется в:

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

Это прекрасно работает в FireFox и довольно хорошо работает в Chrome (немного неудобно); Я не пробовал другие браузеры.

Я также хотел, чтобы любое свободное место ниже нижнего колонтитула было другим цветом, поэтому я добавил этот разделитель нижнего колонтитула:

HTML

 ...    

CSS

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

Обратите внимание, что для работы # footer-stretch div все родительские элементы до элемента body (и, возможно, элемент html – не уверены) должны иметь фиксированную высоту (в данном случае height = 100%).

После большого рытья (включая этот пост) я не смог найти решение, которое мне понравилось. Принятый ответ здесь не делает то, что читает название OP, и лучшие решения, которые я мог найти, по общему признанию, приводили к появлению передовых элементов. Затем он ударил меня: пусть элемент будет «исправлен», обнаружит, когда происходит горизонтальная прокрутка, и переключите его, чтобы он был абсолютно позиционирован. Вот результирующий код:

Просмотрите его как ручку кода.

HTML

  

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"); } }); 
Давайте будем гением компьютера.