Fixed die in the sitbar

Question

Fixed die in the sitbar

Dear experts! The site has 2 columns - content and sitebar. The sitbar has a floating die that is immediately attached to the bottom of the screen, and when we scroll the page to the end of the sitbar, this die should be attached to the bottom of the sitbar and do not move further. The die itself is a child element of the sitbar. How can this be implemented? I tried to do it via position: fixed, but the problem is that I don't know how to find out the coordinates when to replace position with absolute or static. I also tried to implement it via offset and scrollTop, but it also failed.

0

html css jquery fixed

Author: Олег, 2018-07-29

Source

1 answers

score 1 · 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>