Target scrolling within a div

[danrichman]

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?

[WickyNilliams]

This should be possible. I'll look into it this week

[fredcerdeira]

This would be a great feature. If possible you could pass a target option like:
classes : {
scrollTarget : "yourDiv"
}
"yourDiv" would be the scrollable element. If nothing is declared, the default target should be the body.

[WickyNilliams]

Am i right in understanding what you want from this is when you scroll a container with overflow: auto, it should pin/unpin some element? Note you cannot position a fixed element relative to it's parent, so you couldn't necessarily get a header that sticks to the top of an overflowing container (at least you can't with just CSS)

[danrichman]

Yes. So, imagine someone creates a mobile site with that looks like this:

http://jsfiddle.net/nicooprat/Aahqh/

Notice that the nav menu is fixed, the content scrolls, and there are slide out menus on either side. Ideally, your script should be able to target that fixed nav and hide it when someone scrolls the content.

It can be a common convention for mobile sites to have fixed navs and scrolling content with slide menus.

[fidoboy]

+1 for this feature. A scroll target is very necessary for mobile sites...

[fidoboy]

You only need to add a new option parameter to your function, called, for example "target". Then if this parameter is omitted Headroom should use window as target (and as it's doing now) but if target element is specified then it should use scrollTop to get the scroll from that DOM item. The viewport height is the client height of that elem. just imagine a div with same window width an almost same height but with a top offset of N pixels. This is very frequent in mobile webapps. It should not be very difficult to make necessary changes to add this new feature into Headroom if you want and have some minutes for the task

[ionutzp]

has this been added ? :)

[frankie-loves-jesus]

Can't wait :)

[WickyNilliams]

This has now been added with #98

[dcworldwide]

Is this not documented?

[dcworldwide]

If this is in fact still a supported feature please include it in the readme

[WickyNilliams]

It's documented on the project site. The readme is out of sync it seems. In the near future I will likely make the website the canonical source of documentation for the lib, so use that as source of truth for now

[dcworldwide]

Sounds good. Tried out the featured. Works well. Like the API a lot

[WickyNilliams]

Good to hear!

[omikron]

I cannot get this feature to work, it throws an error;

https://codepen.io/omikron/pen/BQKaRM

Uncaught TypeError: this.scroller.addEventListener is not a function(…)attachEvent @ headroom.js:183

[WickyNilliams]

@omikron you must pass the actual element, not a selector, as the scroller option

[omikron]

Sorry, not sure what you mean. Any chance you could modify the codepen to reflect that?

[omikron]

Realized my implementation with jQuery was having an issue with passing the element as a jQuery object, but moving over to pure JS it worked fine.