5 ms·
Sticky Headers with Pure JavaScript and CSS
No jQuery. No other libs. Further testing probably necessary, so submit issue reports if you find any.
- hollerith 14y agoI 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 14y agoIf 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 14y agoIf 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.
- gdg92989 14y agoAnyone have an example? I really dont want to download this.
- laacz 14y agoIt should be mandatory to include an example in such projects, so I do not have to clone it.
- cstrat 14y agoAgree!
- chengyinliu 14y agoI created one for him simply by renaming the example.html file and host on github. Zero credit claimed. http://chengyin.github.com/Balloon http://chengyin.github.com/Balloon
- dotborg 14y ago"pure javascript" ?
- tim_heap 14y agoPure, as opposed to using a library like jQuery. Plain would have been a better word.
- deleted 14y ago[deleted]
- vhiremath4 14y agoYeah plain is more accurate.
- vhiremath4 14y agoYeah sorry about not having an example page up, and thanks for getting on it Chengyin. I'll make a proper example page next.
- 0r3jq4a0j 14y agoPartially broken on iOS.
- vhiremath4 14y agoUnfortunately, there are bound to be bugs. Please submit an issue report on the repo.
- andersnolsen 14y agoNot 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 14y agoYes 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.
- cheald 14y agoposition: fixed on iOS is basically a non-starter, FWIW. If you can fix all the issues with it you'll be a minor internet hero. :)
- freddywang 14y agoThe 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.
- vhiremath4 14y agohttp://vhiremath4.github.com/Balloon/ http://vhiremath4.github.com/Balloon/ Also outlined on the README.
- Axsuul 14y agoDoes anyone know of a jQuery plugin that does this?
- vhiremath4 14y agoYes 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 https://github.com/imakewebthings/jquery-waypoints http://polarblau.github.com/stickySectionHeaders/ http://polarblau.github.com/stickySectionHeaders/
- Axsuul 14y agoThank you kindly. And great job, got to check out the example.
- edwinyzh 14y agoThanks 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...
- mmilo 14y agoHis example might be a page header, but there is nothing that explicitly states that this needs to be for a page headings. In fact this particular project doesn't seem to be intended for that purpose at all, more for long list of grouped items. While I think your opinion is valid, I'm not convinced addressing it at this particular project is warranted. Just sayin' :)
- ralph 14y agoAnd 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 http://catb.org/jargon/html/B/brain-damaged.html
- vhiremath4 14y agoFirefox issues are fixed for page up/down and home/end keys.
- Narretz 14y agoNot sticky at all in FF 15.0.1? Anyone else?
- vhiremath4 14y agoIs 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.
- naiquevin 14y agoI 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 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 14y agoHaha 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 14y agoThe 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.
- crescentfresh 14y agoballoonInst.inflate({'header1', 'header2'}); That's not valid js. The array example (`[]`) is fine on its own.
- vhiremath4 14y agoYou'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.
- heyadam 14y agoThis is very helpful and the no jQuery dependency is very convenient. Thanks!
- vhiremath4 14y agoIssues with Firefox should be fixed now (on the home/end keys as well as page up/down).