Geek Answers Handbook

Attach a bar to the container footer

In this Fiddle, I try to keep the panel always at the bottom left, even if the user scrolls the container. Currently, if I scroll the container, the panel moves, and will not always attach to the footer.

Although this is similar to the default behavior, I did not know about it. So any explanation would be really helpful. (My guess was that it would be attached to the bottom of the container).

What to consider:

  • The bar should cross the horizontal scroll bar of the container when resizing horizontally. (what is happening now)
  • The bar should always be at the bottom of the container. (not happening)

.parent {
  width: 60%;
  height: 300px;
  position: absolute;
  background-color: tomato;
  overflow: auto;
}
.content {
  height: 18000px;
  width: 300px;
  background-color: firebrick;
}
.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 20px;
  text-align: center;
  width: 50px;
  height: 20px;
  background-color: beige;
}
<div class="parent">
  <div class="content"></div>
  <div class="bar">BAR</div>
</div>
Run code
+4
2

. javascript.

var stickToBottom = function (parent) {
    var bar = parent.querySelector('.bar');
    var top = bar.offsetTop;
    parent.addEventListener('scroll', function (e) {
        var el = e.currentTarget;
        bar.style.bottom = -el.scrollTop + "px";
        bar.style.left = el.scrollLeft + "px";
    });
}
var parent = document.querySelector('.parent');
stickToBottom(parent);

, :

  • .
  • .
  • , .
0

CSS

.grand-parent{
  position: relative;

}
.parent {
  width: 60%;
  height: 300px;
  overflow: auto;
  background-color: tomato; 
}
.content {
  height: 18000px;
  width: 300px;
  background-color: firebrick;
}
.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 20px;
  text-align: center;
  width: 50px;
  height: 20px;
  background-color: beige;
}

HTML

<div class="grand-parent">
  <div class="parent">
    <div class="content"></div>
  </div>
  <div class="bar">BAR</div>
</div>
0

More articles:


All Articles