wickynilliams / headroom.js Goto Github PK
View Code? Open in Web Editor NEWGive your pages some headroom. Hide your header until you need it
Home Page: https://wicky.nillia.ms/headroom.js/
License: MIT License
Give your pages some headroom. Hide your header until you need it
Home Page: https://wicky.nillia.ms/headroom.js/
License: MIT License
Hi,
Used this plugin a while back and did some mobile browser tests at that time. The plugin didn't seem to support android.
Android
Android 2.1 and below -> no fixed position
Android 2.2/2.3 - User scalable 0 + fixed position -> works but no headroom JS
Android 3+ - Fixed position works but no headroom JS
iOS
iOS 3/4 fixed position doesn’t work (applies fixed as static)
iOS 5.1 fixed position works but no headroom JS
iOS 6 fixed position works and headroom JS works
iOS 7 fixed position works and headroom JS works
Let me know what you think and what your experiences are. :)
How can i call headroom.update() or other function from my code?? (outside the AngularJS directive). I need update or force pin or unpin from my code, but i don't know how to call it…
NOTE: I'm not using jQuery
Some weird thing happen in this case, It seems there is not syntax errors, but some way the script doesn´t work "at all" http://codepen.io/sp3ncer/pen/twnFI
Support-wise:
I have tried and tried and can not get this to work see my fiddle
http://jsfiddle.net/7yrvg/1/
Could you please add an angular.js directive that will integrate with the standalone widget?
Thanks for creating this. It works great. But I had to work on it for quite a while before I figured out that I had to add the CSS. I initially interpreted the instructions for jQuery in a literal way:
// simple as this!
// NOTE: init() is implicitly called with the plugin
$("# header").headroom();
So, that's all I did. And indeed, it was quite simple. But although I could see the classes changing on scroll, nothing happened. So, eventually I figured out that -- at least, in my case -- I had to create and add the CSS for the classes:
.headroom {
position: fixed;
top: 0;
left: 0;
right: 0;
transition: all .2s ease-in-out;
}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
I'm not sure if the method I used is correct, or if this is supposed to work by following the "simple as this!" guideline in the docs. But it did not work out of the box for me, and if the CSS is required, maybe that could also be shown in the documentation?
I edited your very cool plugin to make the header show/hide like the browser top URL bar, by changing the top position according the scroll.
Here my update method:
update : function() {
var currentScrollY = this.getScrollY(),
toleranceExceeded = this.toleranceExceeded(currentScrollY);
var actualY = parseInt(this.$elem.css('top')),
newY = actualY + this.lastKnownScrollY - currentScrollY;
newY = Math.max(Math.min(newY, 0), -this.$elem.height());
this.$elem.css('top', newY + 'px');
clearTimeout(this.unpinTimer);
this.unpinTimer = setTimeout((function($elem)
{
return function()
{
var elemHeight = parseInt($elem.height()),
actualY = parseInt($elem.css('top'));
if (actualY < -elemHeight/2)
{
$elem.css('top', -elemHeight + 'px');
}
else
{
$elem.css('top', '0px');
}
};
}
)(this.$elem), 200);
this.lastKnownScrollY = currentScrollY;
},
I tried to add headroom plugin
// headroom jQuery Plugin $doc->addScript($dcTemplatePath.'/js/headroom.min.js', 'text/javascript');
and than
<script> // grab an element var myElement = document.querySelector("header"); // construct an instance of Headroom, passing the element var headroom = new Headroom(myElement); // initialise headroom.init(); </script>
to my header <header class="headroom">test</header>
I am not using any CSS Style because there is no such documents for this.
Please update readme file with clear concept how to use it.
I have tried and tried but can't seem to get it to work
It is not supporting on IE9, do we have support for IE9 & above browsers
returns:
Object [object Object] has no method 'headroom'
I'm fairly sure I did everything correctly.
Hello, I have been trying for several hours to get this working for iOS 7 on both an ipad and iphone with fixed postition header. My site consists of 5 100% divs and I have tried both the pure js and jQuery approach. With the Jquery method, it worked on my ipad and not iphone. The JS way didn't work for either, only my dekstop. Would extra things be needed to make this work besides your scripts and initiating by the element? I did try disabling all other js and it made no difference and I'm using jQuery 2.0.0. Any help would be greatly appreciated. This is the site http://bit.ly/1eGCShX and it should be working
Footer scroll down similar to header scroll up.
see:
https://github.com/paulirish/infinite-scroll 'binder' option.
if i use a div with overflow-y: scroll, headroom does not work.
Unable to combine Headroom.js with jQuery Mobile's fixed toolbars:
http://demos.jquerymobile.com/1.4.0/toolbar-fixed/
Here's what I got so far:
http://jsfiddle.net/frank_o/C5KLL/2/
Any thoughts?
Many thanks!
Hi,
I can't seem to add more than one class onto the options classes of headroom:
$("#menu").headroom({
"tolerance": 0,
"offset": 0,
"classes": {
"initial": "headroom animated",
"pinned": "headroom--pinned slideDown",
"unpinned": "headroom-unpinned slideUp"
}
});
Any way of resolving this issue?
tests are nice
Not sure why, however. No exception is thrown at any time, but the script doesn't seem to work at all.
currently have to redefine the entire options object if using plain JS, can this be achieved in a neater fashion.
Windows' non-smooth scrolling with mouse wheel means that if offset % (1 turn of mouse) == 0
the element may never get pinned, without further scrolling down
HI,
I am trying to use headroom in IE7 and IE8 and a new error is thrown:
Line 100: this.debouncer = new Debouncer(this.update.bind(this));
It looks there is a compatibility problem with bind method.
Is there any solution to make this magnific script compatible with all IE versions from 7?
Thanks.
Will likely fail catastrophically in older browsers. Need some kind of early exit.
Test for:
function(){}.bind
"classList" in document.documentElement
requestAnimationFrame
All of these can be polyfilled for older browsers
Hey,
Great work on this! One question, is there anway when you go back all the way up to top the top of the page, remove the .headroom--pinned class, or infact, better yet, add a new class "headroom-top". That way, with css, I can remove the fixed position.
My reason being, for those that have a different design approach on the top head.
Any help will be appreciated, thanks!
when i use this as a jquery plugin,i get some error message as:
Uncaught TypeError: Object [object Object] has no method 'headroom'
I don't know why,so I come here for help.
Hello, i get the following error on your demo page:
TypeError: 'undefined' is not a function (evaluating 'this.update.bind(this)')
Browser:
Safari/webkit
Hey.
Would be really nice to download this via bower.
I'm sorry I don't know how to delete this issue. I forgot to add this to my dependencies in Angular.
Is there any way to prevent pinning on anchor jumps to a higher part of the page, so anchors don't get obstructed by a pinned header?
At first thanks for the nice plugin.
For now in iOS, plugin change pinned status only on scrollend, and don`t work properly with kinetic scroll.
Hello, I heard there's callbacks now in this awesome script. I want to use the callbacks for execute an action on unpin. I found nothing in the docs explaining how to do it, so, can I have some explaination on how to use them ?
PS: Sorry for my bad english, I'm a french student.
Allow an option to set an offset so that the pin/unpin only takes effect so far down the page
Many mobile websites have Facebook-style slidein menus and the main content div slides over to make room for those menusIn that case, the window doesn't scroll, but the main content div has a height of 100% and the content scrolls within that relatively or absolutely positioned div. (see snap.js as an example).
Is there a way to target the scrolling within a main div, rather than the window itself?
you must include license text for MIT license
Hi, It would be cool if there is feature like offset in Bootstrap Affix plugin. http://getbootstrap.com/javascript/#affix
ps. sorry for bad English.
Hi!
It would be awesome to get an event on the header element node telling you it was pinned or unpinned. some additional actions might be desirable in JS when pinning/unpinning occurs
First of all, great plugin.
Second, a suggestion. Currently it works like this, header has no class, when scrolling down a class is added and when scrolling up a class is substituted. My suggestion would be to remove all classes when you scroll to the page top. In that case you can have a header without a background, give it a background when scrolling up and down and when you are back at scroll Y 0 the background is removed (due to the scrolling classes being removed.)
Would do it myself but I'm horrible at JS
Hi Nick,
Just wanted to let you know that I asked Headroom.js to be hosted on cdnjs, as this could be useful for JSFiddle and such.
Cheers
returns:
Uncaught TypeError: Cannot read property 'classList' of null
Thou shalt not use reserved words
Added jquery.headroom.js and headroom.js to my html. Called plugin in headroom.js with:
$("header").headroom({
"tolerance": 5,
"offset": 205,
"classes": {
"initial": "animated",
"pinned": "bounceInDown",
"unpinned": "bounceOutUp"
}
});
Getting 'Uncaught ReferenceError: Headroom is not defined' in console.
Add a tolerance to scrolling so that little movements do not trigger lots of repaints
Saw the functionality on a few sites now and wanted to implement it in a current project, and after much fail found headroom.js thanks.
Expression '{pinned:'showme',unpinned:'hideme',initial:'headroom'}' used with directive 'headroom' is non-assignable!
I get this error message with classes attribute. How can i avoid it?
You might get a more natural flow by alternating between absolute and fixed positioning. Start with position: absolute, as you scroll down. On scroll up start, set an absolute position to top: element height * -1. When element position == window position, set to position: fixed, top: 0. And then reverse logic on scroll down.
This would mimic mobile browser address bar behavior. Sorry I can't PR right now, but thought I'd make the suggestion.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.