stefangabos / zebra_pin Goto Github PK

code

var pin = new $.Zebra_Pin($('.elem'), {
    contain: true
})

Useful for highlighting current position in a sticky sidebar menu, for example

Getting "Uncaught TypeError: $.Zebra_Pin is not a constructor" is that because I'm using jQuery 3.1.1?

Hello,
I noticed an issue if you initialize zebra pin, and then the viewport width changes as a result of a scrollbar appearing. This can happen if something else on the page loads content via ajax or dynamic content.

A window.onresize event does not occur in this case; and this results in a slightly incorrect width on a zebra pin element.

You can observe the behavior/issue in this pen example (notice how the width is visibly different when it is pinned):
https://codepen.io/adamcoulombe/pen/BapVRaL

It isn't practical in every scenario to manually update the zebra pin after ajax load. There could also be other factors that might cause this to occur beside just ajax.

I found a solution that I have implemented on my fork, and I wanted to share it. It could potentially be worked into this library, it is a little hacky though.

It involves adding a 100% width invisible iframe to the document and listening its resize event, then dispatching a resize event to the window if it occurs, the concept is described here:
https://stackoverflow.com/questions/2175992/detect-when-window-vertical-scrollbar-appears

Hi is it possible to add a scroller to the element that is being stuck once it becomes a certain height. I am using it to stick a sidebar shopping cart so new items get added dynamically and it is changing the height dynamically.

Hi,
Is there a reason for having a dependency to jQuery <2.0 ?

element jumping to the right when scrolling, when initiated on scroll the whole element moved over to the right about 10 pixels