harm-less / angular-sticky Goto Github PK
View Code? Open in Web Editor NEWPure javascript AngularJS directive to make elements stick when scrolling
Home Page: http://harm-less.github.io/angular-sticky
Pure javascript AngularJS directive to make elements stick when scrolling
Home Page: http://harm-less.github.io/angular-sticky
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 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
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'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.
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.
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?
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?
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?
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"
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(); });
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.
i am using angular 1.5.8
Hi,
it would be nice if i could trigger redraw on the directive element manually when needed without having to use the hlStickyElement.
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.
function elementWidth() {
return container ? container.clientWidth : nativeEl.offsetWidth;
}
might be better
I volunteer to help maintain this project. Lmk.
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).
no workie:
http://harm-less.github.io/angular-sticky/#!/demo/sticky-stack
OSX10.13 Chrome 65
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;
}
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.
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.
When using this plugin, the page jumps down about 50px when clicking any element (or body) once the container is "stuck".
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
Layouts often need a custom z-index and it's currently hard-coded.
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
I would like to hook to stick 'event'? and prepend my DOM to body. Is this possible ?
Does this plugin work in Angular 1.5.x? I can't seem to get it to work.
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.
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.
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
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.