

Sticky Headers with Pure JavaScript and CSS - vhiremath4
https://github.com/vhiremath4/Balloon
No jQuery. No other libs. Further testing probably necessary, so submit issue reports if you find any.
======
edwinyzh
Thanks for your contribution to the open source community, and with respect, I
think page headers sticking to the top or bottom are huge screen estate
wasters for wide screens, Twitter Bootstrap's default menu style, Gmail and
Google Groups's new look are example come to my mind...

~~~
ralph
And with my browser, Firefox, they break Page Up/Down, and therefore Space
(also pages down). Instead of the slight overlap for context that Firefox
normally gives, there's now a gap so it's Space, cursor-up a bit to continue
reading, Space, ... <http://catb.org/jargon/html/B/brain-damaged.html>

~~~
vhiremath4
Firefox issues are fixed for page up/down and home/end keys.

------
laacz
It should be mandatory to include an example in such projects, so I do not
have to clone it.

~~~
chengyinliu
I created one for him simply by renaming the example.html file and host on
github. Zero credit claimed.

<http://chengyin.github.com/Balloon>

------
naiquevin
I like your style of using 'jeeves' as the namespace for useful helper
functions :-) BTW, I have been recently working on a sticky buttons plugin
myself <https://github.com/naiquevin/jquery-sticky-buttons> Uses jquery, no
hosted example, not quite well documented and I have no idea if it works on
iOS but I am planning to fix the last these points soon (except jquery)

~~~
vhiremath4
Haha glad someone found the humor in it. :-)

You may want to check that Magneto website in your readme though. It doesn't
seem to exhibit the behavior you wish to showcase. You should just create a
GitHub project page that shows how your plugin works. I got some fire for not
having one for Balloon.

~~~
naiquevin
The readme refers to the administration panel of a magento instance and not
the magento website. May be I should remove the link to the website to avoid
any confusion. Any way, will try to set up github project page this weekend.

------
hollerith
I want a Firefox preference or extension that makes all sticky elements into
ordinary, non-sticky elements so that I never have to experience sticky HTML
elements.

~~~
chrismorgan
If it's _very_ narrow, I don't mind it much. But thick ones reduce screen
space drastically - worst of all, rendering the Space bar (which should scroll
down a page at a time) useless. Now _that_ I really do hate.

~~~
vhiremath4
If this is a general discussion about sticky headers, then I'll have to agree
with you guys. If you're referring to Balloon itself, it shouldn't matter what
size the object you want to stick is. It should stick if you just inflate it
with the API.

------
andersnolsen
Not bad but it needs some more testing. After some up and down scrolling with
home, end, page up and down it totally blew up in Chrome.

~~~
vhiremath4
Yes I agree. It needs a good amount of more testing. Could you file an issue
on the repo? I'd really appreciate it. I'm also aware that there are issues on
iOS.

~~~
freddywang
The catch: don't go for native scrolling if you want iOS issue fixed. Try
emulated scrolling what iScroll did before iOS5 came out. When inertia
scrolling kicks in (the moment your release your touch and page continue its
momentum scroll), any offset, scrollTop information is not updated. You are
out of luck trying to fit any positioning calculation based on outdated
offset/position. At the moment, there is no solution for this until Apple fix
it.

------
crescentfresh

        balloonInst.inflate({'header1', 'header2'});
    

That's not valid js. The array example (`[]`) is fine on its own.

~~~
vhiremath4
You're correct. I should have specified that the values do not matter. I have
updated the README to account for this. The reason why I wanted to make this
an option is because, in certain cases, someone may want to keep their headers
as a collection of ids pointing to something else, and I wanted to allow them
to be able to just pass in this collection/object literal without having to
convert it to an array.

------
dotborg
"pure javascript" ?

~~~
tim_heap
Pure, as opposed to using a library like jQuery. Plain would have been a
better word.

------
vhiremath4
<http://vhiremath4.github.com/Balloon/>

Also outlined on the README.

------
vhiremath4
Yeah sorry about not having an example page up, and thanks for getting on it
Chengyin. I'll make a proper example page next.

------
vhiremath4
Issues with Firefox should be fixed now (on the home/end keys as well as page
up/down).

------
heyadam
This is very helpful and the no jQuery dependency is very convenient. Thanks!

------
gdg92989
Anyone have an example? I really dont want to download this.

------
Axsuul
Does anyone know of a jQuery plugin that does this?

~~~
vhiremath4
Yes there are a few good jQuery plugins if you just Google for them. This was
intended to be without jQuery or any other JavaScript libraries. Here are a
couple jQuery plugins that look promising:

<https://github.com/imakewebthings/jquery-waypoints>
<http://polarblau.github.com/stickySectionHeaders/>

~~~
Axsuul
Thank you kindly. And great job, got to check out the example.

------
Narretz
Not sticky at all in FF 15.0.1? Anyone else?

~~~
vhiremath4
Is it not sticky, or are there issues with pageup/down/spacebar? Because the
latter is a known issue, and I've filed a GitHub issue fix request.

------
0r3jq4a0j
Partially broken on iOS.

~~~
vhiremath4
Unfortunately, there are bound to be bugs. Please submit an issue report on
the repo.

