wickynilliams / headroom.js Goto Github PK

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

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

Add a tolerance to scrolling so that little movements do not trigger lots of repaints

I have tried and tried and can not get this to work see my fiddle
http://jsfiddle.net/7yrvg/1/

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. :)

It is not supporting on IE9, do we have support for IE9 & above browsers

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?

returns:

Object [object Object] has no method 'headroom'

I'm fairly sure I did everything correctly.

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.

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.

Could you please add an angular.js directive that will integrate with the standalone widget?

Hello, i get the following error on your demo page:

TypeError: 'undefined' is not a function (evaluating 'this.update.bind(this)')

Browser:
Safari/webkit

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

Hey.

Would be really nice to download this via bower.

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.

see:
https://github.com/paulirish/infinite-scroll 'binder' option.

if i use a div with overflow-y: scroll, headroom does not work.

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

tests are nice

you must include license text for MIT license

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

currently have to redefine the entire options object if using plain JS, can this be achieved in a neater fashion.

• deep merge function?
• be cleverer about copying options into fields?

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.

I'm sorry I don't know how to delete this issue. I forgot to add this to my dependencies in Angular.

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.

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.

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;
    },

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?

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.

returns:

Uncaught TypeError: Cannot read property 'classList' of null

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!

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.

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?

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?

Allow an option to set an offset so that the pin/unpin only takes effect so far down the page

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.

cdnjs/cdnjs#2374

Cheers

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.

See https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY

I have tried and tried but can't seem to get it to work

http://jsfiddle.net/7yrvg/1/

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!

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

Not sure why, however. No exception is thrown at any time, but the script doesn't seem to work at all.

Footer scroll down similar to header scroll up.

• Better README
• Github pages
• Examples - offset, tolerance, custom css classes, jQuery plugin, raw object
• Support list in docs

Support-wise:

• classList - IE10, android 3
• rAF - IE10, safari 6, iOS6,
• bind - IE9

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

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?