jQuery Keep Element in View When Scrolling

Sam Deering
Tweet

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);

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Akiii

    Thanks !

  • http://profile.yahoo.com/53SWDWGRKXSS5XFATXVK7S4D4Y HoLaHoLa

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

    • http://jquery4u.com/ jQuery4u

      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

        • http://jquery4u.com/ jQuery4u

          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.

  • http://jquery4u.com/ jQuery4u

    Try changing your doctype to this: (remove spaces)