Detect scroll bottom

by Nelu Malancea

HTML

<div class="header">
  <p>Header</p>
  <p><strong>This should not scroll</strong></p>
  <p>Header</p>
  <p>Header</p>
  <p>Header</p>
  <p>Header</p>
  <p>Header</p>
</div>
<div class="adjustedHeight">
  <p>Content</p>
  <p><strong>Only this section should scroll</strong></p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

CSS

.header {
  background-color: #55aaff;
}

JavaScript

var adjustHeight = function(){
  $content = $('.adjustedHeight');
  $content.height($(window).height()-$content.offset().top);
}

$(document).ready(function(){
  adjustHeight();
});

$(window).resize(function(){
  adjustHeight();
});