Вопрос по позиционированию css/js

180

01 февраля 2018, 19:57

Насколько я знаю свойство position: fixed позиционируется относительно объекта window то есть окна браузера. Вопрос в следующем: как можно спозиционировать элемент таким образом чтобы он был будто fixed относительно нужного блока на странице (допустим колонки сайдбара). Знаю такой баг - если у нужного контейнера поиграться с transform: translate; и дочернему элементу этого контейнера дать position: fixed то позиционироваться он будет будто у него position: absolute. Но мне нужно чтобы это была такая себе иммитация fixed, чтобы элемент был в рамках viewport пока он над ним.

Заранее прошу прощения что так сумбурно объяснил суть вопроса, но лучше сформулировать пока что не могу.

Answer 1

В зависимости от того, какая нужна поддержка Если Ие, и всякая шушера не нужна, то вот вам вариант position: sticky;

.fixed {
  position: sticky;
  top: 0;
}

https://codepen.io/anon/pen/jZPQEG

если нет, то только js. Вот, самый простой вариант, с установкой top

var $aside = $('.aside'),
    $main_fixed = $('.fixed'),
    aside_fixed_height = $aside.outerHeight(true) - $main_fixed.outerHeight(true),
    main_fixed_position_top = $aside.position().top,
    this_top = 0,
    this_top_end = 0;
$(window)
  .resize(function(){
    aside_fixed_height = $aside.outerHeight(true) - $main_fixed.outerHeight(true),
    main_fixed_position_top = $aside.position().top;
  })
  .scroll(function(){
    this_top = $(this).scrollTop();
    this_top_end = this_top - main_fixed_position_top;
    if(this_top_end < 0) {
      this_top_end = 0;
    }
    if(this_top_end > aside_fixed_height) {
      this_top_end = aside_fixed_height;
    }
    $main_fixed.css( 'top', this_top_end);
  });

https://codepen.io/anon/pen/NyqOwN

Answer 2

$(window).on('scroll', function() { 
  var outer = $('.outer'), 
    inner = $('.inner'); 
  //console.log(outer.offset().top, $(window).scrollTop()); 
  if ($(window).scrollTop() >= outer.offset().top && $(window).scrollTop() <= outer.offset().top + outer.height() - inner.height()) { 
    inner.css('top', $(window).scrollTop() - outer.offset().top) 
    console.log($(window).scrollTop(), outer.offset().top) 
  } else if ($(window).scrollTop() < outer.offset().top) { 
 
    inner.css('top', 0) 
  } 
});

body { 
  height: 2000px; 
  padding: 250px 0; 
} 
 
.outer { 
  height: 500px; 
  background: orange; 
  position: relative; 
} 
 
.inner { 
  height: 50px; 
  width: 50px; 
  position: absolute; 
  left: 0; 
  top: 0; 
  background: darkblue; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="outer"> 
  <div class="inner"> 
  </div> 
</div>