Randomblue Randomblue - 6 months ago 22
HTML Question

Overflow scroll but visible

I have a

header
element with an
article
element below it. The
article
has
overflow: scroll
. Please see my website here.

My goal is to make the
header
semi-transparent so that the
article
content will show behind it when scrolled. I want the
article
overflow to show with the
header
.

The main restriction is that the scrollbar should span from the bottom of the
header
, not the top.

How can such an effect be done?

Answer

A trick that works is to copy the content. Below is a solution with a blurry and semi-transparent header.

$(function() {
  var $content = $('.content');
  var $clone = $('.clone');

  $clone.append($content.html());

  $content.on('scroll', function() {
    $clone.scrollTop($content.scrollTop());
  });
});
div {
  width: 400px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: white;
}

.content {
  top: 50px;
  overflow: scroll;
}

.clone {
  padding-top: 50px;
  overflow: hidden;
  -webkit-filter: blur(0.1em);
}

.header {
  height: 50px;
}

.overlay {
  background: rgba(240, 240, 240, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis
</div>
<div class="header">
  <div class="clone"></div>
  <div class="overlay"></div>
</div>