JavaScript
Article
By Sam Deering

jQuery Keep Element in View When Scrolling

By Sam Deering

Quick jQuery code snippet on how to keep an element in view. For demo scroll down on any page on the blog and see ads on right sidebar ads, they remain inview as you scroll down the page. Then go back to normal view when you scroll up again.

stays-in-view

Demo

Scroll down this page and look at the right hand sidebar.

The Code

//keep element in view
(function($)
{
    $(document).ready( function()
    {
        var elementPosTop = $('#jq4u-sidebar-ads').position().top;
        $(window).scroll(function()
        {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            //if top of element is in view
            if (wintop > elementPosTop)
            {
                //always in view
                $('#jq4u-sidebar-ads').css({ "position":"fixed", "top":"10px" });
            }
            else
            {
                //reset back to normal viewing
                $('#jq4u-sidebar-ads').css({ "position":"inherit" });
            }
        });
    });
})(jQuery);

Turning it into a plugin

Could quite easily be made into a jQuery plugin. Actually I’ll code one out real quick and include it below.

/**
 *  jQuery keep element in view plugin.
 *
 *  @author      Sam Deering
 *  @copyright   Copyright (c) 2012 jQuery4u
 *  @license     http://jquery4u.com/license/
 *  @link        http://jquery4u.com
 *  @since       Version 1.0
 *  @notes       Plugin only works on scroll down elements.
 *
 */

(function($)
{
    $.fn.keepElementInView = function()
    {
        var elemPosTop = this.position().top;
        $(window).scroll(function()
        {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            if (wintop > elemPosTop)
            {
                this.css({ "position":"fixed", "top":"10px" });
            }
            else
            {
                this.css({ "position":"inherit" });
            }
        });
        return this;
    };

    $(document).ready( function()
    {
        jQuery('#jq4u-sidebar-ads').keepElementInView();
    });
})(jQuery);
  • Akiii

    Thanks !

  • While scaling more than 100% then scrolling this page, the ad element is out of viewport or disapear. Any fix?

    • This is a limitation at the moment, i’m working on a better plan to get around this, so the ads are never off screen!

      • CronanPilotCar

        Love the code but when I scroll my navigation jumps to the left about 10px. Is there a way around this? E-mail me at cronanpilotcar@gmail.com

        • Whats your site I’ll take a look for you

          • Dr. Zee

            Did you come across a solution to this? I was able to fix it in most browsers by changing the else condition to the same as the if. My thought was that it was caused by a jerky hand-off between the jQuery and the original css. But it’s still happening in IE.

  • Try changing your doctype to this: (remove spaces)

Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.