Skip to content

JQuery plugin to make element lock in place when it hits the top of the browser

Notifications You must be signed in to change notification settings

peterh32/jquery.fixMe.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 

Repository files navigation

jquery.fixMe.js

JQuery plugin to make element lock in place when it hits the top of the browser

Approach

When you scroll the page to where the element hits the top of the browser, change the element to position:fixed. To maintain document flow, replace the element with an empty placeholder.

Usage

$('.my_element').fixMe(); or $('.my_element').fixMe({yPad: 60});

Options

yPad: Number of pixels from the top of the page at which fixed behavior should kick in. Default is zero.

Iframe Support

Can support an element on a page inside an iframe using a window message sent from the top window, something like this:

iframe = document.getElementById('#my_iframe');
$(window).on("scroll", function() {
    var y = Math.round($(window).scrollTop() - $(iframe).offset().top);
    iframe.contentWindow.postMessage({'y': y}, '*');
});

This assumes the top-level page is the one that's scrolling.

The postMessage should consist of the object {'y': some number of pixels }, and of course the initialization $('.my_element').fixMe(); needs to run in the iframe, not the top window.

About

JQuery plugin to make element lock in place when it hits the top of the browser

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published