Layouts often need a custom z-index and it's currently hard-coded.

Noticed this bug when opening a small popover when the sticky element (table header in my case) was sticky and the placeholder for the sticky element is completely out of view.

Bootstrap's popover causes a re-render of the sticky element, which cause the placeholder to be removed and re-added back, and a window scroll down (by the placeholder/sticky element's height).

Using the event change API we see that the the bootstrap poopover causes a change from stick to stick

<div hl-sticky event="stickyChanged(event)"></div>

function stickyChanged({event)}) {
  console.log(event); //prints stick every time the popover is opened
}

Diagnosed it with chrome dev-tools performance tab (browser render happens right after the sticky state render)

A fix we did was to counteract the scrolling side-effect was to scroll back that amount of pixels inside the event attribute provided with the API of the directive.

Something like:

function stickyChanged({event: stickyStatus}) {
  const scrollDiff = window.scrollY - <PLACEHOLDER_HEIGHT>;

  if (stickyStatus == 'stick' && lastStickyStatus == stickyStatus) {
    if (scrollDiff >= 50) {
      window.scrollBy(0, - <PLACEHOLDER_HEIGHT>); //should be negative in our case
    }
  }
  lastStickyStatus = stickyStatus;
}

i am using angular 1.5.8

Thanks for this great plugin! We are currently trying to optimize for mobile devices and face the many challenges of mobile scrolling. A common kind-of-fix is to listen to touchmove events, maybe this could get an optional flag for the next release?

An item is never sticky when at the top of a page when sticky should evaluate to true.

The best example is the demo simple bottom anchor. The item isn't sticky until the user starts to scroll, and goes away when at the top of the page.

If You don't use a <div> as a element with the hl-sticky attribute it'll replace the element with it, so we can't use it with a ie. <section> element.

no workie:
http://harm-less.github.io/angular-sticky/#!/demo/sticky-stack

OSX10.13 Chrome 65

function elementWidth() {
return container ? container.clientWidth : nativeEl.offsetWidth;
}

might be better

Hi,
it would be nice if i could trigger redraw on the directive element manually when needed without having to use the hlStickyElement.

Hey, the library looks great, but I've been having a lot of trouble getting things working due to inaccurate docs. The bower install line should be bower install angular-sticky-plugin, currently it points to a totally different library. Also, to include it in the project it appears to be hl-sticky rather than hl.sticky. Finally, https://github.com/jonathantneal/angular-sticky shares the same name, which makes googling for this lib tricky. Not sure what you can do about that really, but FYI.

Ciao!

How are you?

We cannot angular-sticky, we get this error:

Unhandled rejection Error: Failed to execute "git ls-remote --tags --heads https://github.com/mattosborn/angular-sticky.git", exit code of #128
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/mattosborn/angular-sticky.git/'

    at createError (/usr/lib/node_modules/bower/lib/util/createError.js:4:15)
    at ChildProcess.<anonymous> (/usr/lib/node_modules/bower/lib/util/cmd.js:102:21)
    at ChildProcess.emit (events.js:159:13)
    at maybeClose (internal/child_process.js:943:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)

"angular-sticky": "angular-sticky-plugin#^0.4.2"

Hey, thanks for this nice module.

Would you mind publishing the latest version (2.4) to npmjs.com?
Currently, version 1.1 is reported as latest version there:

Let me know if I can help you there.

When using this plugin, the page jumps down about 50px when clicking any element (or body) once the container is "stuck".

In Bower.json make Angular resolve to "~1." so people with a higher Angular version than 1.4. can use it too.
Perhaps even set an range to recommend to people with lower versions to upgrade to 1.4 or higher.

Love this plugin and I am using this in my Angular 1.5.9. and it works. However, I want to know if something like this possible.

I want the sticky element to become sticky only after the other bottom divs are scrolled. For example, I have a left side bar like this:

<div class="block-1 avatar" hl-sticky="" offset-top="50">
<!-- STICKY AVATAR -->
</div>
<div class="block-2 statistics">
<!-- SOME STUFF -->
</div>
<div class="block-3 comments">
<!-- SOME STUFF -->
</div>
<div class="block-4 recommendations">
<!-- SOME STUFF -->
</div>

At the moment, it is sticky from the moment the block-1 avatar is scrolled so it overlaps on the other bottom divs on scrolling.

What I want is, I want the above left bar divs to be relative during scroll and I only want the block-1 avatar to become sticky after the user has scrolled past block-4 recommendations.

I read the API and not sure if there is a setting for it. Is the above possible?

Thanks,
Neel.

sticky element with dynamic addition of a DOM element increasing the height of the element didn't change the placeholder height. This started to happen with the latest release 0.4.2 (reverted back to 0.4.1 and it works fine).

I have two bootstrap columns both with sticky elements in them

<div class="col-md-6">
    <div hl-sticky="">
        left sticky
    </div>
</div>
<div class="col-md-6">
    <div hl-sticky="">
        right sticky
    </div>
</div>

they do not overlap and id like them to both stick to the top of the screen, the problem i am having is that the second (right) sticky, is offset in the Y position starting from the bottom of the left div, id like them both to sit flush at the top of the screen.

I have a work around of setting the offset-top of the right sticky to negative the left sticky height but it feels a bit hacky, what is the best way to achieve this? thanks

Does this plugin work in Angular 1.5.x? I can't seem to get it to work.

Hi.
I use this code for program usage of angular-sticky and add resize into events. resize events working, but sticky elemen not rerendered. Only after scroll it fix position:

angular.element($window).bind('scroll resize', function() {
	// draw the sticky element through an apply as the event wasn't from Angular
	$scope.$apply(function() {
		stickyElement.draw();
	});
});

Do you have some ideas what wrong?

bad width after hide->show element (#element).
Problem with method (line 309):
function elementWidth() { return nativeEl.offsetWidth; }
because after hide this method set width to 0 and after show set always 0.

<div id="element" style="width: 200px;"> <div hl-sticky="" style="background-color: red"> Test </div> <div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 1 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 2 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div

If the container is just as big as the element you made sticky, the page no longer scrolls down, probably because the element is being made sticky/unsticky at every scroll.

I've noticed a bug with use-placeholder option. Neither of the following variants lead to usePlaceholder option to be false:

<div hl-sticky use-placeholder="false">
<div hl-sticky use-placeholder="{{false}}">

Instead options.usePlaceholder is equal to string value "false" that is evaluated as true in the code. It results in creating placeholder always independently of the option value.

I have a toolbar with anchor="bottom". The toolbar is located below a table that takes a few seconds to load. Before the table's data is loaded, the toolbar is rendered correctly, in the non sticky position. After the data is loaded and the table rows are rendered, the toolbar gets bumped down the page, out of view. The toolbar does not become sticky. Any recommendations?

I would like to hook to stick 'event'? and prepend my DOM to body. Is this possible ?

When using ng-show on an element that also has hl-sticky my content appears fixed to the top left of the page upon ng-show being set to true. If i do not use ng-show then all works as expected and looks great

Are there any plans to support the upcoming specification of stickily positioned elements?

https://www.w3.org/TR/css-position-3/#sticky-pos

We realize this is quite early and not at all widely supported but we need smooth stickyness on iOS devices and are considering switching to fixed-sticky because of this. As this switch would come with a lot of drawbacks, we would like to know if such an implementation is on the horizon or even at all possible with the current approach.

We have several sticky elements. Some of them are included in view of states from the ui-router.
So if there is a state change, the destroy function of the sticky elements which are not available anymore is fired. But here the stickyness of all elements gets removed, even those which should stay sticky.

You should only destroy the 'hlSticky' Directive which fires the destroy function, not ALL!

$scope.$on('$destroy', function onDestroy() { stickyElementCollection.destroy(); });

I volunteer to help maintain this project. Lmk.

Hey, I have a problem.

I want to show a button on the bottom of the page (sticky). When I scroll down the whole page (like 2000 px), then it should not be sticky anymore and be at its position. Everything works fine until now. The Problem is, the element shows just up, when I scroll. I tried to work with “always-sticky”, then it is visibly from the beginning, but it does not “unstick” at the bottom of the page. Is there a way, where I can tell the element to be visible right from the beginning? Without scrolling?

Cheers, Sean Roddis

Unless I'm totally misreading the docs, there doesn't seem to be a way to make elements stick within a scrollable area that isn't the main area. That's probably a pretty important feature to a large group of people (including me).

Hi there. I am using webpack and angular 1.5
sometimes your plugin throws the
bodyEl.scrollTop is not a function error error. How to fix that?