Pin any element within a container

When a pinned element is removed, it stays registered in elements property but there is no longer any data (https://github.com/webpop/jquery.pin/blob/gh-pages/jquery.pin.js#L50) for it.

I had seen your plugin somewhere on some days ago (HN I think), but when I needed it, as usual, couldn't find it anymore. Adding the plugin to the Plugin registry will help me (and perhaps others?) find it when we need it, and thus perhaps increase popularity too :wink:

its showing error with latest jquery version

Please Replace the window load function in script line number 110 in jquery.pin.js

$window.load(update); with $window.on('load', function(){ update});

now it will not show any error

There's an inconsistency present when passing in selectors. IE, activeClass can be passed in unqualified, but containerSelector needs to be fully qualified.

EG, this will not work

$('.post .sidebar.lower').pin({
    padding: {
        top: 10,
        bottom: 10
    },
    activeClass: 'pinned',
    containerSelector: 'pin-parent'
});

But this does

$('.post .sidebar.lower').pin({
    padding: {
        top: 10,
        bottom: 10
    },
    activeClass: 'pinned',
    containerSelector: '.pin-parent'
});

It could be argued that this is semantically correct, given the difference between the option names.. EG "Class" as opposed to "Selector".

Will open a PR for this issue if no-one else gets to it first

Hi, these commits add classes to the three states(to eventually be used by css), adds an overflow:auto to pinned content that is higher than the window, and support for a fixed header.

Last thing to be corrected, still, is to correct the following behavior: when a pinned content is in overflow, and the end of the container is reached, the pinned content should change state as soon as its normal height hits the bottom, not its current height(the overflow:auto one)

Option to add and remove class to element being pinned as the pinning state changes. This allows CSS targeting based on if the element is being pinned or not. Passed in as an option [activeClass] when calling pin function.

$('.please-pin-me').pin({ activeClass: 'currently-pinned' });

Is it possible to have multiple pins but target different screen sizes - ie the equivalent of having both these on the page:

$(".pin-1").pin({containerSelector: ".container-1", minWidth: 768});
$(".pin-2").pin({containerSelector: ".container-2", minWidth: 1024});

Many thanks for any pointers...!

Code is below. It will pin my .one element, but ignores my attempt to pin .two and .three

<style type="text/css">
    .one, .two, .three { 
        width: 100%;
        height: 500px;
        background-size: 100% auto;
        position: relative;
    }
    .one {
        z-index: 1 !important;
    }
    .two {
        z-index: 11 !important;
    }
    .three {
        z-index: 111 !important;
    }
</style>
<div class="mymain">
    <div>
    This is a nav section.<br />
    </div>
    <div class="main">
        <div class="one " >
            <h2>Section 1</h2>
            <p>Lorem ipsum dolar sit amet. Lorem ipsum blah blaah.</p>
            <p>Lorem ipsum dolar sit amet. Lorem ipsum blah blaah.</p>
        </div>
        <div class="two " >
            <h2>Section 2</h2>
            <p>Lorem ipsum dolar sit amet. Lorem ipsum blah blaah.</p>
            <p>Lorem ipsum dolar sit amet. Lorem ipsum blah blaah.</p>
        </div>
        <div class="three">
            <h2>Section 3</h2>
            <p>Lorem ipsum dolar sit amet. Lorem ipsum blah blaah.</p>
            <p>Lorem ipsum dolar sit amet. Lorem ipsum blah blaah.</p>
        </div>
    </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="http://enterprise.blob.core.windows.net/microsoftcloud/pih/jquery.pin.js"></script>
    <script>


    $(".one").pin({containerSelector: ".main"})

    $(".two").pin({containerSelector: ".main"})
    $(".three").pin({containerSelector: ".main"})

    </script>