d-oliveros/ngsticky

AngularJS directive to make elements stick when scrolling down.

ngsticky's Issues

callback

Is there a way to have a callback here? I heed to call a function when sticky is on. something like:
<nav sticky callback="myFunction"></nav> would be great!

sticky executing prematurely

This is dope but is there any way to make Sticky execute after image content on page has loaded rather than execute on document ready?

on hide / show not re-rendering

When using this plugin i am hiding the section that i am using 'sticky' on then showing the section on larger devices. The plugin works fine until the section is hided then shown again.

placeHolder misspelled

Hi,
Awsome ngSticky !

Line 35 :
usePlaceholder = $attrs.useplaceholder !== undefined;

should be :
usePlaceholder = $attrs.usePlaceholder !== undefined;

(capital P).

By the way, this is a very useful feature in terms of design...

Cheers

Not found on npm.

Any chance you can npm publish this to npm?

Change the sticky when the top line 2nd sticky over or same top line 1st sticky

I notice it switch the sticky when bottom line 2nd sticky over top line 1st sticky. I think its not correct behavior

$compile error when I include this in my app

I have a very simple page into which I'm sprinkling AngularJS 1.3.x. I wanted to use your sticky directive, but when I include it in my page, I'm getting a $compile error.

var app = angular.module('susquhannaApp', ['ui.bootstrap','sticky']);

<nav sticky role="navigation" id="main-nav" ng-controller="MainNavController">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Support</a></li>
    </ul>
</nav>

Error: error:multidir
Multiple Directive Resource Contention

ghost element

add the option is activated which, after scrolling is created ghost block(
empty box with the same width and height parameters)*

Jerky animation & multiple placeholders created

I upgraded this directive in my project from version 1.7.10 to the current 1.8.3 and experienced some issues that are preventing me from keeping the updated version. I decided to make a simple demo to show the issues I was seeing, but the basic demo turned out to have a bunch of issues of it's own.

basically I am using this

 $scope.headerIsSticky=true;

<header sticky
        sticky-class="is-sticky"
        stick-limit="true"
        use-placeholder="true"
        disabled-sticky="!headerIsSticky"
        media-query="(min-width: 992px) and (min-height: 700px)">
    <h1>Sticky Header</h1>
    <label>
      <input type="checkbox" ng-model="headerIsSticky" /> Sticky?
    </label>
</header>

🪲 When the window small & is below the triggers for the media query multiple placeholder elements are created. My content gets pushed down the page further and further. The header element rapidly switches between being sticky and not being sticky.
🪲 When the element is scrolled down and stick, and then I disable the stickiness, the placeholder element still remains and take up space when it should not

Demos

(When viewing the demos, be sure to open it in a new window it doesn't play well with the scrollable frame on the plnkr website.)

Code using v1.8.3: http://plnkr.co/edit/2MUAL8sw0IX3QnVbLvEg?p=preview

The above code works perfectly in version 1.7.11, so these seem like regression bugs.
Code using v1.7.11: http://plnkr.co/edit/XR30tyL1Y0RsLu5MMYHj?p=preview

How to recompute the stickyBottomLine

My scenario is confine a sticky menu to a parent that gets changed (its height) many times. So when initializing the sticky menu, it will compute a wrong stickyBottomLine. How to recompute this stickyBottomLine each time the parent height is changed?

Weird behaviour when sticky column is longer then non sticky column.

I have a page with two columns, I get weird behaviour when the sticky column is longer then then non sticky column. When I try to scroll down, the page instantly moves back up again.

Consider removing matchmedia dependency

I believe the matchmedia dependency adds nothing over what can be achieved with generic CSS. This dependency adds additional overhead for no benefit and in my view could be removed.

Media Query param does not appear in minified script or in Bower version

Bower installs v1.7.1, however it does not have support for media queries. This is not in the minified version in GitHub either

What about create a new bower version with the new fixes?

Hello @d-oliveros.

Thank you for your project. It's helping me a lot.

I saw the latest fixes done by @kamilkp. It helps me in my project, the problem is that a new tag (bower version) was not released. Can you do that, please?

Thank you.

Can't install using Bower

Error: ENOTFOUND Package ngSticky not found

disable-sticky not working

"confine" attribute not read nor used anywhere

The documentation references a "confine" attribute on the directive but I discovered that it does absolutely nothing. I opened the code and found out why: it isn't read at all, nor is there any logic to perform any confining operations.

Was this featured removed at some point or was it simply never implemented?

Sticky when moving horizontally

Hello,

I was wondering if there is a way to make the element stick also when the user moves horizontally on the screen. I have a toolbar, and I want it to be allays on the screen, so sticky on horizontal scroll is important.

Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

When I resize I get this error message:
Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Any idea why?
I'm applying it to my header
<header class="banner navbar" role="banner" ui-view="header" sticky sticky-class="navbar--fixed"></header>

The width of the sticky elem is 0 when the elem is hiding first

The width of the sticky elem is 0 when the elem is hiding first.
For example,

1. Create a sticky element and hide it with ng-hide
2. Scroll to the bottom of the page (the sticky element is not shown)
3. Make the sticky element shows

Problem: The sticky element is shown but with width set to 0 (the first width when hiding).

ngSticky does not work inside of ion-nav-view

http://stackoverflow.com/questions/32237459/ngsticky-not-working-when-the-sticky-a-directive-is-inside-of-a-template

I'm using the Ionic framework, which uses ion-nav-view instead of ui-view.

In my demo link here you can see that the sticky doesn't work: http://leongaban.com/sticky/#/ I wrote this page locally without the template inserted into the ion-nav-view and the sticky worked as expected.

Is there a work around to get it working again from inside an inserted template?

Version mismatch

You declare the version as 1.0.1 in bower.json but you only have one release tag 1.7.0.

PRs

HEy @d-oliveros , can you pls take a look at the outstanding PRs?

There are quite good ones that should be merged...

Pls let us know if you are short of time to dedicate to this awesome module so someone can fork and take over.

Tks

Initial Left Value & Problems with css transitions

In my application the initialCSS left has value 'auto', but I needed a pixel value. Therefor I use:

//Find the left value
 leftValue = elem.getBoundingClientRect().left;

And I had some problems with a css property on the parent container called:

backface-visibility: both;

I didn't dive deep into it, but setting this value to:

backface-visibility: backwards;

was enough to solve the problem and didn't affect my transitions.

Initial CSS Properties Being Set Too Early

If a sticky container is part of a view that is initially hidden, the initialCSS variable can be initialized before the view is fully rendered.

Solution: Wrap the initialization of the initialCSS variable in a $timeout call.

When resizing browser window from wide to small with min-width media-query, sticky element does not un-stick

The style attribute does not change dynamically on window resize. I have to reload the page for it take effect.

Bottom offset

Hi @d-oliveros include bottom offset of sticky.
sticky area overlapping other elements include bottom property of sticky.
thanks.

sticky-class not coming

The attribute sticky-class is not coming in the class attr after the recent update.

Sticky when not "window" is the one that scrolls

I am using Angular Material, and a part of that layout makes my content element the one that scrolls, not the "window" itself. My header, and left/right menues all stays in place.
So, angular.element(window).on('scroll', function() { console.log('scrolled')(); }) gives no output when scrolling, but angular.element(document.getElementById("myStickyID")).on('scroll', function() { console.log('scrolled')(); }) does.

Is it possible to add more dynamic of what to watch when scrolling, or will that possible break other things?

Lost sticky element, when fast scrolling

Hi, author!
Try scrolling with touchpad on mac. Too much sticky elements is lost.

Media query issue

Media query functionality works well on page load but not on resize. The sticky class is still applied.

Offset not working for me.

It work pretty well without offset but when I add offset=100 it just do anything.

Need ng-model or something similar

Hi There,

This is awesome. But I need to use it in a scenario where I have a list of panels. Only currently selected panel needs to stick. Whats happening is, all of them are sticking.

So I want an attribute like this. disable-sticky="true" disable-sticky="true" or disable-sticky="!panel.selected"

Thanks,
@kashjs
author: http://adaptv.github.io/adapt-strap

Sticky class not being set

Hi. Thanks for the new version. I installed via bower and get v1.7.7 and it no longer sets the sticky-class when the attribute is set, or the default.

TypeError: Cannot read property 'top' of undefined

I just install ngSticky and everything seems fine. but if I add confine="true" to the sticky div, it throw out an error :

<div sticky offset="100" confine="true"> Will unstick and stick to bottom of parent element</div>

TypeError: Cannot read property 'top' of undefined
    at unStickElement (sticky.js:234)
    at checkIfShouldStick (sticky.js:151)
    at Object.onChange [as fn] (sticky.js:365)
    at k.$digest (angular.js:12447)
    at k.$apply (angular.js:12712)
    at angular.js:1419
    at Object.d [as invoke] (angular.js:3918)
    at c (angular.js:1417)
    at cc (angular.js:1431)
    at Xc (angular.js:1344)(anonymous function) @ angular.js:9997(anonymous function) @ angular.js:7299k.$digest @ angular.js:12466k.$apply @ angular.js:12712(anonymous function) @ angular.js:1419d @ angular.js:3918c @ angular.js:1417cc @ angular.js:1431Xc @ angular.js:1344(anonymous function) @ angular.js:21817a @ angular.js:2550(anonymous function) @ angular.js:2823q @ angular.js:325c @ angular.js:2822

And I had try playing with the examples, I got the same error too.
Could any one tell me what's going on ? thanks! ; )

initialCSS not getting correct values

I'm using ngSticky for two elements. For one of the two element the initialCSS values are not correct. It seems as if the element, which is loaded through a template file via the ui router plugin, is not ready yet when the ngSticky directive is run. When I wrap the initialCSS object in a setTimeout function and return it, this problem doesn't occur.

This feels a bit hacky though. Do you have any suggestions on how to fix this issue properly?

Add support for "bottom" sticky

This is a feature request for adding support for a "bottom" sticky.

stickyLine value relative to its parent position when used within floated content

When using a "sticky" within a grid system the offsetTop gives a 0 value.

I was using foundation and notice this behaviour when attempting to place a sticky element within a span element using a ".column(s)" class (which floats the element).

Instead I have switched using getBoundingClientRect on the element which then appears to pass the top position relative to the document window.

stickyLine = $elem[0].getBoundingClientRect().top - offsetTop;

Purpose of Setting 'height' CSS on Unstick

What is the purpose of setting an explicit 'height' style during the 'unStickElement' method call? Since the 'stickElement' method never sets that style there is no need to reset it during the unstick. In fact, setting an explicit height during the unstick can potentially cause bugs. If the 'sticky' element changes height, the next call to 'unstick' will undo those changes.

Sticky breaking when hiding (in a tabbed layout)

The sticky becomes corrupt when you change tabs and come back to a tab with the sticky.

This can be fixed as follows;

            }, function(newVal, oldVal) {
                if ( newVal !== oldVal &&  newVal !== 0 || typeof stickyLine === 'undefined' ) { 
                    // STEMN changes - added newVal !== 0 so sticky does not get defined to zero when tab is changed
                    stickyLine = newVal - offset;
                    checkIfShouldStick();
                }
            });

Lose 'sticky' after page reload

The code works fine, but the problem is when i refresh the page.
For example:

I load the page, scroll down, refresh the page and then scrolls back to the top. The sticky element will lose it's 'sticky', and will stay always at the top until i change the route or reload the page at the very top.

Error in console on resizing the window

http://plnkr.co/edit/vKuXVOYYxswbJhT5a4yZ?p=preview

I see "TypeError: $scope.unStickElement is not a function" when resizing the plunkr display window. Seems like a legit error--looking at the sticky.js code, it doesn't seem as if unStickElement should be a function on $scope

Media Query not Actually Turning Off Sticky Behaviour

When using the 'media-query' attribute as described in the docs the sticky behaviour of the element does not stay off when the query matches. Instead, the 'isSticking' flag toggles on each scroll event. The result is that the sticky behaviour gets turned on and off and causes the scroll to jump back to the top of the page.

Some extraneous inline styles mess up layout : ( height = 0px bug )

I am enjoying this ngSticky with the newly introduced DIV based scrolling support ( not on the browser window object ). Basic support that was added recently almost works. Let me describe the symptoms that I am seeing.

As mentioned, I set up the sticky-scroll element directive and inside have a long list of content. The title near the top is going to be sticky. So I write 2 nested DIV tags place the sticky ( trust me, I could write 1, but 2 seemed to overcome the bug by hardcoding (which I am doing as a last resort, not by clear choice ) ).

I have noticed that upon going from pinned to unpinned states there is some inlined styles applied. That's fine if absolutely necessary, but it messes up my layout

Here's the dump. Looks innocuous. but no. far from it. the dreaded height = 0 destabilizes my content. and even though the position is fixed ( I copied it when it was in a sticky position, the height 0 remains for eternity ). This is bad, because my CSS definitions are devastated by the cascade of inlines. Height 0 destroys static layouts. I also do not hardcode widths and heights in my classes because the content is just that - simple titles and such.

element.style {
    height: 0px;
    z-index: 10;
    width: 270px;
    top: 65px;
    position: fixed;
    left: auto;
    margin-top: 0px;
}

Can someone else chime in if this height:0 is a bug or by design choice. I can overcome most of these artifacts by caving in and hardcoding pixel widths and heights in the markup, thus losing any power of the stylesheet. shouldn't have to

Minified version does not match lib version

Just looking at update timestamps alone your minified version in the dist folder is out of date as compared to the unminified version in your lib folder. This is a minimal issue, but will probably trip more people up in the future.

Question: Multiple Sticky Elements

The module can manage multiple sticky elements and make a Instagram bar effect?
Can we expand this?

Thanks,
Jacopo

Height 0 in when non-stickied

With the latest set of updates it seems the div set up to be sticky ends up getting a "height: 0" styling when going back into the page. This then means that the item directly underneath it gets overlapped.

with height:0 - wrong page layout

without height: 0 - correct page layout

Body class not removed on destroy

When a sticky element is destroyed, the body class is not removed.

Here an example : http://plnkr.co/edit/75O2jpZCi5ZfUcTIHosW

Is this a normal behaviour ?

Wrong stickyLine when hidden elements occur before sticky element

If there are elements on a page which are initially hidden, the value for stickyLine seems to be incorrect. This problem happens when I use ng-hide or the collapse directive of http://angular-ui.github.io/bootstrap/ on a page before a sticky footer (<div sticky anchor="bottom">). On scrolling the sticky element doesn't get sticky on the correct scroll position and instead jumps into the page later. If I toggle the hidden elements to be visible, the sticky element behaves correct.
I guess the value for stickyLine is calculated before Angular hides the elements and therefore is not up-to-date when the page is ready.

Maybe #38 is related to this bug.

Missing LICENCE file

Hi, what's the licence for this directive?