

Show HN: jQuery.pin – a plugin for making stuff stick - bobfunk
http://webpop.github.com/jquery.pin/

======
kemayo
As a best-practices criticism, this is using a direct window scroll handler,
which can be a bit of a performance nightmare. It's often better to use some
sort of throttling to make sure your scroll handler only runs every X ms. The
tradeoff there, of course, is that you get a slightly less buttery-smooth
pinning experience... but in return your pages will still scroll nicely on
non-zippy machines.

Resig wrote about this after it horribly mauled Twitter a few years back:
<http://ejohn.org/blog/learning-from-twitter/>

------
kevincennis
For anyone wondering "why do we need jQuery plugins for simple things like
this?", you may be interested in position: sticky. Here's an article:
[http://updates.html5rocks.com/2012/08/Stick-your-landings-
po...](http://updates.html5rocks.com/2012/08/Stick-your-landings-position-
sticky-lands-in-WebKit). Worth noting that this hasn't actually been adopted
as part of the spec, but it certainly would be a welcome addition in my
opinion.

This plugin looks well-done, but I'm looking forward to a day when we don't
need JavaScript to control layout like this.

------
smickie
This is good but there are some more mature solutions out there, bootstrap has
a very basic 'affix' plugin built in. However I have found the waypoints
plugin to be absolutely amazing and flexible for any sort of sticky stuff:

<http://imakewebthings.com/jquery-waypoints/>

~~~
bobfunk
Waypoints is more mature and can do much more complex stuff, but as with my
earlier response about affix, for our use-case of pinning an unpinning the
descriptions of the screenshots in our gallery, Waypoints didn't really come
with anything out of the box.

------
DonnyV
I built something like this about a year ago called sticky-panel.
<https://code.google.com/p/sticky-panel/> Mine only has a couple added
features like before and after detach events and support for overflow divs.

~~~
UntitledNo4
Do you have a demo for it somewhere?

~~~
DonnyV
[http://sticky-
panel.googlecode.com/svn/trunk/jquery.stickyPa...](http://sticky-
panel.googlecode.com/svn/trunk/jquery.stickyPanel/Main.htm)

------
WickyNilliams
How does this compare to say Bootstrap's affix plugin? I see that it supports
a min-width property, but personally I'd rather deal with this myself via
media queries (matchMedia API in JS) than have a limited option via the
plugin.

~~~
bobfunk
The difference is being able to specify a containing element, so the pinned
part gets unpinned once you scroll past the bottom of the container.

We first developed the plugin for the Webpop gallery page
(<http://www.webpop.com/gallery>) to make the description next to each
screenshot stick to the top while you were viewing that gallery entry.

Later we also used it for the pinned navigation in our documentation section
to make sure it didn't stay fixed and overlapped the footer once you scroll
down to the bottom of the page. As far as I know Bootstrap's affix doesn't
really help you there.

------
dmitrypolushkin
This and all other solutions on this page doesn't work, when sticky block
height is more than window height. Always showed the top of the block, but it
should be scrolled to the bottom, when you are scrolling content, in other way
to see the bottom is possible only in case when page scroll to the bottom or
container where this sticky block is embedded is over.

------
websirnik
Is there something like this that works properly in the mobile browser?

~~~
bink-lynch
I have had reports that <https://github.com/bigspotteddog/ScrollToFixed> runs
on mobile. Here are the confirmed combos:

\- iPad 4 running iOS 6.0 (10A403) with dontCheckForPositionFixedSupport: true

\- iPad 4 running iOS 6.0.1 (10A523)

\- iPad 1 running iOS 5.1.1 (9B206) with dontCheckForPositionFixedSupport:
true

\- Nexus 7 running Android 4.2.1 with dontCheckForPositionFixedSupport: true

Unfortunately, I am mobile challenged so I cannot test these out for myself.

------
dagi3d
another similar plugin: <https://github.com/bigspotteddog/ScrollToFixed>

~~~
bink-lynch
I am the author of ScrollToFixed, which has been out in the wild for a couple
of years and does docking top, bottom, middle and still allows the fixed
elements to move with the horizontal scroll, which is great for table headers.

I was thinking about posting it on HN when I got a break in the action.
Haven't had a break in the action yet.

------
leeoniya
every time this kind of plugin comes up, i link to this one from years ago
<https://github.com/terkel/jquery-floating-widget>

------
opayen
Doesn't work on IE10

~~~
bobfunk
Pushed a fix - should work in IE10 as well now.

------
mattmanser
Could do with some smoothing and polishing. Jerks all over the place.

Also, what is with this new fashion of declaring functions as anonymous
methods?

    
    
        var recalculateLimits = function () { 
           /* snip */
        }; 
        var update = function () { recalculateLimits(); onScroll(); };
    

Have I missed a memo?

EDIT: I forgot to say apart from my moaning, does the job, good code, good
job! And it's only jerky when you use the scroll button on a mouse.

~~~
hkuo
I learned this method with the book JavaScript the Good Parts, though it was a
while ago and I can't remember the specific reasoning behind the books'
recommendation.

From the other commenter's SO link, I found this link to go more in depth into
the differences of declaring functions, and it seems to come down to having
stricter control on the order of events with no surprises.

[http://javascriptweblog.wordpress.com/2010/07/06/function-
de...](http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-
vs-function-expressions/)

And here's an example of one of the surprises you'll run into if you don't
declare your functions in this way: [http://www.adequatelygood.com/JavaScript-
Scoping-and-Hoistin...](http://www.adequatelygood.com/JavaScript-Scoping-and-
Hoisting.html)

~~~
mattmanser
That's definitely not in javascript the good parts. It's a new thing and its
spreading like some sort of horrible virus. It has quite the opposite effect
that you're prescribing to it.

Your second link describes both variable hoisting, a real problem which causes
serious problems, and function hoisting that has never been a problem as
almost every other modern language behaves that way.

You don't seem to be a polyglot or you'd understand the problem immediately.
Variable hoisting is just downright bizarre if you've worked in almost any
other language, whereas function declarations can be anywhere in most
languages and so _when_ they are declared is almost completely irrelevant to a
programmer.

Artificially assigning them to a variable so that suddenly function
declaration order does matter is just downright weird. The 'normal' function
declaration is better and clearer.

~~~
hkuo
I'm probably not the best person to have a debate about this since I don't
have a traditional CS background. I dabble in many different languages, but
I'll never claim to be an expert in any.

To your point about this not being in the book JavaScript the Good Parts, I
re-downloaded my purchase from Oreilly to double check, and throughout the
book, all functions are declared as variables. Here's a screenshot from the
second page of the "Functions" chapter, which is the first time a function
declaration is introduced in the book:
[https://dl.dropbox.com/u/1517499/Screen%20Shot%202013-03-26%...](https://dl.dropbox.com/u/1517499/Screen%20Shot%202013-03-26%20at%2010.17.13%20AM.png)

Edit: Just an edit to add that I quickly perused the pdf and couldn't pick out
anywhere where he explained why he recommends this way. In any case, I'm
always open to any arguments one way or the other.

~~~
nkozyra
I don't think that's what he's addressing, though.

It's this:

var foo = function() { redeclaration(); }

that I believe he's referring to, unless I'm mistaken.

~~~
jonahx
I don't believe so. It sounds like he prefers using function declations to
function expressions. And this is incorrect according to most js gurus. For
example:

[http://javascriptweblog.wordpress.com/2010/07/06/function-
de...](http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-
vs-function-expressions/)

From that link:

"b) Function Expressions are more versatile. A Function Declaration can only
exist as a “statement” in isolation. All it can do is create an object
variable parented by its current scope. In contrast a Function Expression (by
definition) is part of a larger construct. If you want to create an anonymous
function or assign a function to a prototype or as a property of some other
object you need a Function Expression. Whenever you create a new function
using a high order application such as curry or compose you are using a
Function Expression. Function Expressions and Functional Programming are
inseparable."

Also this link: <http://kangax.github.com/nfe/>

brings up these disadvantages to function declarations:

* can't conditionally declare functions with consistent results across browsers * function declarations cannot appear in blocks (technically), though many implementations allow this in practice

finally, i'd argue that function expressions encourage you to think of
functions as the first class objects js intended them to be

~~~
nkozyra
He included far more code than was necessary, if that's the case. I don't see
why the implementation of the function expression would be relevant if so.
Clarity would help here.

