How To create Any contrivance Sticky

Nano Joli    5:17:00 PM    Download , Script   

How To create Any contrivance Sticky

When you traveling scrolls down your journal to look at a lot of content, the higher portion of your journal goes out the window from the highest to form means for the lower portion that enters from all-time low.

Now what we have a tendency to ar aiming to do is stick your chosen contrivance to the highest fringe of the window because it is near to leave, so creating the contrivance visible in any respect time whereas the traveler scrolls. it'll float there till its original location comes back once the page is scrolled copy.

This trick is applicable to associate degreey contrivance or part that has an ID, notwithstanding its location on your journal. it's good for navigation bar, subscription box and social media sharing buttons.

See it in action, scroll down this post and keep your eyes on the highest menu bar.

How to install

Paste the subsequent code on top of the </body> tag in your templet. 

Or if you like to not bit the templet, you'll be able to merely paste it in a very HTML/Javascript (in Blogger) or a Text contrivance (in WordPress). If you decide on this route, ensure you position this contrivance below (after) the contrivance that you simply need to form sticky.

<script>
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html 
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style> 

1. Get the ID of the widget or element you want to make sticky and enter it in line 6 (replacing "YOUR_WIDGET_ID"). For example let's say the widget ID is HTML9, then code line 6 would become:

bs_makeSticky("HTML9");
Preview before saving.

Styling

• Styling for the sticky widget while it's sticking can be applied in line 28.
• Background and box-shadow are optional. However you might want to keep the background (and replace the color to match your sidebar's). Most templates do not assign a background to widgets meaning you can see the content scrolling in the background.

Enjoy!

DOWNLOAD HERE