Фиксированная позиция, но относительно контейнера

Question

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

position: fixed;
top: 0px;
right: 0px;

Однако div находится внутри центрированного контейнера. Когда я использую position:fixed, он фиксирует div относительно окна браузера, например, напротив правой стороны браузера. Вместо этого он должен быть зафиксирован относительно контейнера.

Я знаю, что position:absolute можно использовать для исправления элемента относительно div, но когда вы прокручиваете страницу вниз, элемент исчезает и не прилипает к вершине, как с position:fixed.

Есть ли хак или обходной путь для достижения этой цели?

Answer 1

Вы можете попробовать мой плагин jQuery, FixTo .

Использование:

$('#mydiv').fixTo('#centeredContainer');

Answer 2

Еще одним странным решением для достижения относительной фиксированной позиции является преобразование вашего контейнера в iframe, чтобы ваш фиксированный элемент мог быть зафиксирован в области просмотра его контейнера, а не на всей странице.

Answer 3

С чистым CSS вы не можете сделать это;по крайней мере, я этого не сделал.Однако вы можете сделать это с помощью jQuery очень просто.Я объясню свою проблему, и с небольшими изменениями вы можете использовать ее.

Итак, для начала я хотел, чтобы у моего элемента была фиксированная верхняя часть (сверху окна), а левый компонент -наследовать от родительского элемента (потому что родительский элемент центрирован).Чтобы установить левый компонент, просто поместите свой элемент в родительский элемент и установите position:relative для родительского элемента.

Затем вам нужно узнать, насколько сверху находится ваш элемент, когда полоса прокрутки находится сверху.(у ноль прокручивается);снова есть два варианта.Во-первых, это статическое (некоторое число), или вы должны прочитать его из родительского элемента.

В моем случае это 150 пикселей от верхнего статического.Поэтому, когда вы видите 150, это значение элемента сверху, когда мы не прокручиваем.

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});

Answer 4

/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}

Answer 5

У меня та же проблема, один из членов нашей команды дает мне решение.Чтобы разрешить положение div fix и относительно другого div, наше решение состоит в том, чтобы использовать контейнер-отец, обернуть div div и scroll.

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

css

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  prosition:absolute;
}

Answer 6

Я создал jsfiddle, чтобы продемонстрировать, как это работает, используя преобразование.

HTML

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

JQuery

$('.fixedContainer').on('click', function() {
    $('.right').animate({'width': '0px'});
  $('.left').animate({'width': '100%'});
});

https://jsfiddle.net/bx6ktwnn/1/

Answer 7

Это легко (согласно HTML ниже)

Хитрость в том, чтобы НЕ использовать top или left на элементе (div) с помощью «position: fixed;». Если они не указаны, элемент «fixed content» будет отображаться ОТНОСИТЕЛЬНО к включающему элементу (div с «position :lative;») INSTEAD OF относительно окна браузера !!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

Выше я мог найти закрывающую кнопку "X" в верхней части большого количества текста в div с вертикальной прокруткой. «X» стоит на месте (не перемещается с прокручиваемым текстом, и все же он перемещается влево или вправо с включенным контейнером div, когда пользователь изменяет ширину окна браузера! Таким образом, он «фиксируется» вертикально, но располагается относительно ограждающий элемент горизонтально!

Прежде чем я начал работать, буква «Х» прокручивалась вверх и исчезала из виду, когда я прокручивал текстовое содержимое вниз.

Извиняюсь за то, что не предоставил мою функцию javascript hideDiv (), но это излишне сделает этот пост длиннее. Я решил сделать его максимально коротким.

Answer 8

Я сделал что-то подобное некоторое время назад. Я был довольно новичком в JavaScript, так что я уверен, что вы можете сделать лучше, но вот отправная точка:

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

Вам нужно будет установить ширину, а затем она получит ширину окна и меняет поля каждые несколько секунд. Я знаю, что это тяжело, но это работает.

Answer 9

Мой проект - это шаблон .NET ASP Core 2 MVC Angular 4 с Bootstrap 4. Добавление «наклейка» в основной компонент приложения html (т.е. app.component.html) в первой строке работало следующим образом:

<div class='row sticky-top'>
    <div class='col-sm-12'>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>

Это соглашение или я упрощенно это сказал?

Answer 10

Это возможно, если вы используете JavaScript.В этом случае плагин jQuery Sticky-Kit :