Фиксированная плашка в сайтбаре

147
04 октября 2018, 05:40

уважаемые знатоки! На сайте есть 2 колонки - контент и сайтбар. В сайтбаре есть плавающая плашка, которая сразу крепиться к низу экрана, а когда при скроле страницы мы дойдем до конца сайтбара эта плашка должна крепиться внизу сайтбара и дальше не двигаться. Сама плашка является дочерним элементом сайтбара. Как такое можно реализовать? Пробовал сделать через position: fixed, но проблема состоит в том, что не знаю как узнать координаты когда заменять position на absolute или static. Так же пробовал через offset и scrollTop реализовать, но тоже не получилось.

Answer 1

var container = document.getElementsByClassName('container')[0], 
  block = document.getElementById('block'), 
  maxTop = parseInt(getComputedStyle(container).height) - parseInt(getComputedStyle(block).height), 
  blockHeight = parseInt(getComputedStyle(block).height), 
  blockBorder = parseInt(getComputedStyle(block).border); 
 
window.addEventListener('scroll', function() { 
  var t = window.innerHeight - container.getBoundingClientRect().top - blockHeight - blockBorder + 1; 
  if (t < 0) { 
    t = 0; 
  } else if (t > maxTop) { 
    t = maxTop; 
  } 
  block.style.top = t + 'px' 
});
body { 
  margin: 100vh 15px 300px 15px; 
} 
 
.container { 
  height: 1500px; 
  border: 5px solid black; 
  position: relative; 
} 
 
#block { 
  width: 100%; 
  height: 100px; 
  border: 5px solid deeppink; 
  box-sizing: border-box; 
  position: absolute; 
}
<div class="container"> 
  <div id="block"> 
 
  </div> 
</div>

READ ALSO
Как исправить Uncaught SyntaxError: Unexpected identifier?
HTML

Как исправить Uncaught SyntaxError: Unexpected identifier?

 176
Возможно ли так сделать?
HTML

Возможно ли так сделать?

Возможно ли сделать такие границы у блоков без использования фоновых картинок?

 174
Как сделать подобное javascript?
HTML

Как сделать подобное javascript?

Есть такая функция:

 172
Canvas HTML5 JavaScript
HTML

Canvas HTML5 JavaScript

Всем привет, подскажите, пожалуйста, как сделать, чтобы эта анимация, была не просто посередине, а "следила" за курсором? Заранее спасибо

 166