Skip to content

WIP - Sticky scrolling container #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

WIP - Sticky scrolling container #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
15b23de
Update container selector
phazei May 18, 2018
422726a
Build release files
phazei Jan 15, 2020
c0a7535
Attempt to make sticky inside a scrolling div
phazei Jan 15, 2020
cf636f9
Add anchor top sticky for scrolling div container.
phazei Jan 15, 2020
b5944bf
Add anchor bottom sticky for scrolling div container.
phazei Jan 15, 2020
9682531
Update scrolling container demo
phazei Jan 15, 2020
cb4745a
WIP attempting to get transformY distance for sticky stack for positi…
phazei Jan 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions demo/less/demo.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@

@import "demos/container-bottom/scaffolding";

@import "demos/container-scrolling/scaffolding";

@import "demos/sticky-stack/scaffolding";

@import "demos/sticky-stack-bottom/scaffolding";
Expand Down
33 changes: 33 additions & 0 deletions demo/less/demos/container-scrolling/scaffolding.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.demo-container-scrolling {

.hl-sticky {
.sticky-element-default();
}

.scrolling-container {
height: 500px;
overflow-y: scroll;


.box-shadow(inset 0 0 20px 0px fade(@gray-base, 20%));

.divider {
.divider-default(400px);
}
.divider-scrolling-small {
.divider-default(200px);
}
.divider-scrolling-big {
.divider-default(600px);
}

#sticky-container, #sticky-container-bottom {
position: relative;
background-color: @gray-lighter;
.box-shadow(inset 0 0 20px 0px fade(@gray-base, 20%));
}

}

}

4 changes: 4 additions & 0 deletions demo/less/demos/sticky-stack-bottom/scaffolding.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,8 @@
.divider {
.divider-default();
}

#container-stack-bottom {
.box-shadow(inset 0 0 20px 0px fade(@gray-base, 20%));
}
}
4 changes: 4 additions & 0 deletions demo/less/demos/sticky-stack/scaffolding.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,8 @@
.divider {
.divider-default();
}

#stack-container {
.box-shadow(inset 0 0 20px 0px fade(@gray-base, 20%));
}
}
1 change: 1 addition & 0 deletions demo/less/mixins/sticky-elements.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,5 @@
.sticky-element(@minHeight);
.sticky-element-shadow();
background-color: @gray-dark;
opacity: 0.8;
}
2 changes: 1 addition & 1 deletion demo/views/demos/container-bottom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,4 @@ <h2 class="text-center"><span class="glyphicon glyphicon-arrow-down"></span> Scr
</div>
</div>
</div>
</div>
</div>
63 changes: 63 additions & 0 deletions demo/views/demos/container-scrolling.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<div save-content="intro">
<h2>Scrolling Container</h2>
<p>
Scrolling within a div.
Setting a container is done by adding a <code>scroller-container</code> attribute the id of an element.
It will check how much the scroll-body-container has scrolled rather than the page.
</p>
</div>

<!--<h2>Attached to Top</h2>-->
<!--<div save-content="html">-->
<!--<div class="container-fluid">-->
<!--<div id="scrolling-box" class="scrolling-container container-fluid">-->
<!--<div class="divider-scrolling-small">Space before the scrolling container.</div>-->
<!--<div class="row">-->
<!--<div class="col-lg-12">-->
<!--<div id="sticky-container">-->
<!--<div class="divider-scrolling-small">...</div>-->
<!--<div hl-sticky offset-top="50" offset-bottom="10" container="sticky-container" scroller-container="scrolling-box" use-absolute-position="true">-->
<!--I'll be sticky, but only for a short while. Once the grey box in the background disappears if you scroll too far, the sticky element goes with it.-->
<!--</div>-->
<!--<div class="divider-scrolling-small">...</div>-->
<!--<div class="divider-scrolling-small">...</div>-->
<!--<div hl-sticky offset-top="30" container="sticky-container" scroller-container="scrolling-box" use-absolute-position="true">-->
<!--I'll be sticky, but only for a short while. Once the grey box in the background disappears if you scroll too far, the sticky element goes with it.-->
<!--</div>-->
<!--<div class="divider">I'm just here to give the sticky elements some space.</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="divider-scrolling-big">Space after the scrolling container.</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<h2>Attached to Bottom</h2>
<div class="container-fluid">
<div id="scrolling-box-bottom" class="scrolling-container container-fluid">
<div class="divider-scrolling-big">Space before the scrolling container.</div>
<div class="row">
<div class="col-lg-12">
<div id="sticky-container-bottom">
<div class="divider">I'm just here to give the sticky elements some space.</div>
<div hl-sticky anchor="bottom" offset-top="20" offset-bottom="1" container="sticky-container-bottom" scroller-container="scrolling-box-bottom" use-absolute-position="true">
First element.
</div>
<div class="divider-scrolling-small">...</div>
<div class="divider-scrolling-small">...</div>
<div hl-sticky anchor="bottom" offset-top="0" offset-bottom="2" container="sticky-container-bottom" scroller-container="scrolling-box-bottom" use-absolute-position="true">
I'll be sticky, but only for a short while. Once the grey box in the background disappears if you scroll too far, the sticky element goes with it.
</div>
<div class="divider-scrolling-small">...</div>
<div class="divider-scrolling-small">...</div>
<div hl-sticky anchor="bottom" offset-top="0" offset-bottom="3" container="sticky-container-bottom" scroller-container="scrolling-box-bottom" use-absolute-position="true">
Three
</div>
<div class="divider-scrolling-small">...</div>
<div class="divider-scrolling-small">...</div>
</div>
</div>
</div>
<div class="divider-scrolling-small">Space after the scrolling container.</div>
</div>
</div>
6 changes: 5 additions & 1 deletion demo/views/demos/sticky-stack.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,25 +46,29 @@ <h2>Service: Sticky stack</h2>
options: {
anchor: "top",
offsetTop: 30,
container: 'stack-container',
}
},
{
description: 'I\'ll append myself to "Element 1"',
options: {
anchor: "top",
container: 'stack-container',
}
},
{
description: 'Do I still need to explain?',
options: {
anchor: "top",
offsetTop: 30,
container: 'stack-container',
}
},
{
description: 'I\'m the last item in the sticky stack',
options: {
anchor: "top",
container: 'stack-container',
}
}
];
Expand All @@ -73,7 +77,7 @@ <h2>Service: Sticky stack</h2>

<div>
<div class="container-fluid">
<div class="row">
<div class="row" id="stack-container">
<div class="col-lg-12" ng-controller="StackController">
<hl-scroll-along>
Current stack height: {{stackHeightCurrent}}px<br>
Expand Down
3 changes: 2 additions & 1 deletion demo/views/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
<li><a ui-sref="root.demo-container.demo({name: 'events'})">Events</a></li>
<li><a ui-sref="root.demo-container.demo({name: 'container'})">Container</a></li>
<li><a ui-sref="root.demo-container.demo({name: 'container-bottom'})">Container bottom</a></li>
<li><a ui-sref="root.demo-container.demo({name: 'container-scrolling'})">Scrolling Container</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Services</li>
<li><a ui-sref="root.demo-container.demo({name: 'sticky-stack'})">Sticky stack</a></li>
Expand All @@ -43,4 +44,4 @@
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav>
</nav>
23 changes: 20 additions & 3 deletions dist/angular-sticky.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* angular-sticky-plugin
* https://github.com/harm-less/angular-sticky

* Version: 0.5.0 - 2018-10-25
* Version: 0.5.0 - 2020-01-14
* License: MIT
*/
'use strict';
Expand Down Expand Up @@ -432,7 +432,7 @@ angular.module('hl.sticky', [])
// @todo dffgdg
function containerBoundsTop(scrolledDistance) {
if (container === null) {
container = options.container !== undefined ? angular.isString(options.container) ? angular.element(documentEl.querySelector('#' + options.container))[0] : options.container : false;
container = getContainer();
}
if (container) {
var hasScrollDistance = !(scrolledDistance === null || scrolledDistance === undefined);
Expand All @@ -444,7 +444,7 @@ angular.module('hl.sticky', [])
}
function containerBoundsBottom(scrolledDistance) {
if (container === null) {
container = options.container !== undefined ? angular.isString(options.container) ? angular.element(documentEl.querySelector('#' + options.container))[0] : options.container : false;
container = getContainer();
}
if (container) {
var hasScrollDistance = !(scrolledDistance === null || scrolledDistance === undefined);
Expand All @@ -455,6 +455,23 @@ angular.module('hl.sticky', [])
return 0;
}

function getContainer() {
var selector, el = false;

if (angular.isDefined(options.container)) {
if (angular.isString(options.container)) {
selector = options.container;
if (selector.indexOf(".") === -1 && selector.indexOf("#") === -1) {
selector = "#" + selector;
}
el = angular.element(documentEl.querySelector(selector))[0];
} else {
el = options.container;
}
}
return el;
}

var $api = {};

if (stack) {
Expand Down
4 changes: 2 additions & 2 deletions dist/angular-sticky.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading