CODEWITHSUNDEEP
javascriptjquerycssscroll
Friendly King
Friendly King

Reputation: 2476

javascript/jQuery – Keep a div scrolled to the bottom while resizing the page vertically?

I'm having trouble keeping the .content div's scroll pinned to the bottom when resizing the page vertically, i.e., When the footer moves upward during a user resizing the screen, the word "window" should be the absolute last thing to move out of visibility. The footer should push the words "Just Some Text" into the scrollable content, while "Window" should remain visible and atop the footer div. Right now, however, the opposite occurs: when the page is resized, footer moves upwards covering the words "window" followed by "the," then "of," etc, leaving "Just Some Text" visible. Like I said earlier, it needs to be the "opposite" so to speak.

So my question is: How do I continuously keep scroll to the bottom during a page resize?

Here's a fiddle: http://jsfiddle.net/N672c/2/

I have a basic html structure here for the purposes of this question:

 <header></header>

 <div id="content_id" class="content">
      <div class="container">
         Just<br>
         Some<br>
         Text.<br>

         Try<br>
         resizing<br>
         the<br>
         height<br>
         of<br>
         the<br>
         window
     </div>
 </div>

 <footer></footer>

Some CSS as well:

 header, footer {
     position: fixed;
     left: 0; right: 0;
     height: 100px;
     background: teal;
 }

 header { top: 0 }
 footer { bottom: 0 }

 .content {
     position: fixed;
     top: 100px; bottom: 100px;
     left: 0; right: 0;
     overflow-y: scroll;
  }

 .container {
     padding: 20px;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
 }

And a small amount of javascript:

 var $content = $('.content'),
 $container = $('.container'),
 containerHeight = $container.outerHeight();

 $(window).resize(function () {
      $container.css({
         position: $content.innerHeight() > containerHeight ? 'absolute' : 'static'
      });
 }).resize();

Upvotes: 2

Views: 6436

Answers (2)

Rocky
Rocky

Reputation: 304

You can set the scroller to the desired position by using the scrollTop method, which takes one argument, the offset value.

Here you can add a scrollTop method to your 'content' block with an offset of the container block height which is the height you want to keep it as constant.

So add this into your resize function.

$content.scrollTop($container.height());

This'll keep you scrolled to the end on resizing.

Here's a quick check http://jsfiddle.net/4LQnW/6/

Upvotes: 4

Explosion Pills
Explosion Pills

Reputation: 191729

In the resize method just add:

$content.scrollTop($content.height());

This will keep $content scrolled to the bottom constantly: http://jsfiddle.net/N672c/4/

Upvotes: 2

Related Questions