Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Don't fix the element if taller than the viewport

  • Loading branch information...
commit 2fa53d3d5449cb25760e0405bd32fc37301be84b 1 parent 5919985
@bbarakaci authored
Showing with 24 additions and 1 deletion.
  1. +9 −0 dev2.html
  2. +15 −1 src/fixto.js
View
9 dev2.html
@@ -82,6 +82,15 @@
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla ligula, egestas sit amet malesuada vel, iaculis at mi. Donec vestibulum nunc at neque pretium et egestas erat scelerisque. Pellentesque hendrerit egestas eros, non mattis arcu viverra vitae. Praesent tincidunt magna at urna ultrices consequat. Phasellus cursus rutrum lectus non dapibus. Curabitur lorem lorem, blandit vitae vehicula eget, sagittis vitae dolor. Integer sed ipsum sed elit facilisis commodo quis a urna. Mauris scelerisque nibh in metus tempor tristique. Fusce commodo sagittis ultrices. Pellentesque sit amet fermentum orci. Maecenas sollicitudin arcu non felis mollis ac laoreet augue mattis. Morbi condimentum turpis eu ipsum dapibus et euismod risus dapibus. Mauris mauris nisl, rutrum eu ultrices vel, cursus at massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
+ <li class="csticky-holder" style="overflow:auto">
+
+ <div class="csticky" style="height:400px">
+ Sticky is tall. It will not be fixed if viewport is shorter.
+ </div>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla ligula, egestas sit amet malesuada vel, iaculis at mi. Donec vestibulum nunc at neque pretium et egestas erat scelerisque. Pellentesque hendrerit egestas eros, non mattis arcu viverra vitae. Praesent tincidunt magna at urna ultrices consequat. Phasellus cursus rutrum lectus non dapibus. Curabitur lorem lorem, blandit vitae vehicula eget, sagittis vitae dolor. Integer sed ipsum sed elit facilisis commodo quis a urna. Mauris scelerisque nibh in metus tempor tristique. Fusce commodo sagittis ultrices. Pellentesque sit amet fermentum orci. Maecenas sollicitudin arcu non felis mollis ac laoreet augue mattis. Morbi condimentum turpis eu ipsum dapibus et euismod risus dapibus. Mauris mauris nisl, rutrum eu ultrices vel, cursus at massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+ </li>
</ul>
<!-- <div class="absolute" style="position:absolute;top:20px;right:20px">
View
16 src/fixto.js
@@ -147,10 +147,14 @@ var fixto = (function ($, window, document) {
this._saveStyles();
+ this._saveViewportHeight();
+
// Create anonymous functions and keep references to register and unregister events.
this._proxied_onscroll = this._bind(this._onscroll, this);
this._proxied_onresize = this._bind(this._onresize, this);
+
+
this.start();
}
@@ -181,7 +185,11 @@ var fixto = (function ($, window, document) {
this._scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
this._parentBottom = (this.parent.offsetHeight + this._fullOffset('offsetTop', this.parent)) - computedStyle.getFloat(this.parent, 'paddingBottom');
if (!this.fixed) {
- if (this._scrollTop > (this._fullOffset('offsetTop', this.child) - computedStyle.getFloat(this.child, 'marginTop') - this._mindtop()) && this._scrollTop < this._parentBottom) {
+ if (
+ this._scrollTop < this._parentBottom &&
+ this._scrollTop > (this._fullOffset('offsetTop', this.child) - computedStyle.getFloat(this.child, 'marginTop') - this._mindtop()) &&
+ this._viewportHeight > (this.child.offsetHeight + computedStyle.getFloat(this.child, 'marginTop') + computedStyle.getFloat(this.child, 'marginBottom'))
+ ) {
this._fix();
this._adjust();
}
@@ -263,10 +271,16 @@ var fixto = (function ($, window, document) {
},
_onresize: function () {
+ this._saveViewportHeight();
this._unfix();
this._onscroll();
},
+ _saveViewportHeight: function () {
+ // ie8 doesn't support innerHeight
+ this._viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+ },
+
// Public method to stop the behaviour of this instance.
stop: function () {
Please sign in to comment.
Something went wrong with that request. Please try again.