From dd00e48e97db641362cc9ba6651a6b64c71beab6 Mon Sep 17 00:00:00 2001 From: Artem Gordinsky Date: Sun, 24 May 2015 12:53:01 +0300 Subject: [PATCH] Add a "mindBottomPadding" option fixes #23 --- README.md | 6 ++++ dev2.html | 81 ++++++++++++++++++++++++++++++++-------------------- grunt.js | 2 +- src/fixto.js | 7 ++++- 4 files changed, 63 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index bac0124..0211507 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,9 @@ There is no native way to know if the container is sticked, so it will not recei Native sticky will perform very well as all the work is done by the browser. Without native sticky you will notice delayed response and undesired effects on IOS as all the javascript execuion is halted on scroll. Setting `-webkit-transform: translate(0)` to parent container will eliminate undesired effect, delayed response will remain. +### mindBottomPadding (Boolean) +Allows for scrolling through the parent's bottom padding. Defaults to `true`, making fixed element stop when parent's bottom padding is reached. Won't work with native "sticky" implementation. + ## Public Methods Following methods can be called directly on the instance or with jQuery. @@ -177,6 +180,9 @@ jQuery: Or we will choose the other path. We will decide to implement the features we need to have fixto as a plugin that does its own magic. Please open an issue if you would like to see additional features when running on native sticky mode. If there is an issue, just participate with your +1. It will help us to decide for the future. ## Release notes +### 0.4.0 +- Added "mindBottomPadding" option, to make including parent's bottom padding optional when calculating max bottom position of the fixed element + ### 0.3.1 - Bugfix #15 diff --git a/dev2.html b/dev2.html index 5576396..ca2fa20 100644 --- a/dev2.html +++ b/dev2.html @@ -6,34 +6,41 @@ + body { + padding: 20px; + font: 14px/21px "Trebuchet MS", Helvetica, Verdana, sans-serif; + + } + + .csticky-holder { + /* transform: translate(0); + -webkit-transform: translate(0);*/ + } + + .csticky, + .absolute, + .csticky-do-not-mind-bottom-padding { + background: #97CE68; + padding: 20px 30px; + } + + .fl { + float: left; + } + + ul { + list-style-type: none; + margin: 0 auto; + max-width: 800px; + padding: 0; + } + + li { + background: #EFEFEF; + padding: 20px 30px; + margin-bottom: 20px; + } + -
+
@@ -102,6 +116,11 @@ $('.csticky').fixTo('.csticky-holder', {top: 0, useNativeSticky:true}); // $('.absolute').fixTo('body'); + $('.csticky-do-not-mind-bottom-padding').fixTo('.csticky-holder-do-not-mind-bottom-padding', { + top: 0, + mindBottomPadding: false, + useNativeSticky: false + }); diff --git a/grunt.js b/grunt.js index eef8199..d87e590 100644 --- a/grunt.js +++ b/grunt.js @@ -4,7 +4,7 @@ module.exports = function(grunt) { // Project configuration. grunt.initConfig({ meta: { - version: '0.3.1', + version: '0.4.0', banner: '/*! fixto - v<%= meta.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + '* http://github.com/bbarakaci/fixto/' + diff --git a/src/fixto.js b/src/fixto.js index 6bd7b54..c78687d 100644 --- a/src/fixto.js +++ b/src/fixto.js @@ -428,7 +428,12 @@ var fixto = (function ($, window, document) { _onscroll: function _onscroll() { this._scrollTop = document.documentElement.scrollTop || document.body.scrollTop; - this._parentBottom = (this.parent.offsetHeight + this._fullOffset('offsetTop', this.parent)) - computedStyle.getFloat(this.parent, 'paddingBottom'); + this._parentBottom = (this.parent.offsetHeight + this._fullOffset('offsetTop', this.parent)); + + if (this.options.mindBottomPadding !== false) { + this._parentBottom -= computedStyle.getFloat(this.parent, 'paddingBottom'); + } + if (!this.fixed) { var childStyles = computedStyle.getAll(this.child);