Skip to content

Commit

Permalink
Add a "mindBottomPadding" option
Browse files Browse the repository at this point in the history 
fixes bbarakaci#23
  • Loading branch information
@artemgordinskiy
artemgordinskiy committed May 24, 2015
1 parent a3b9f77 commit dd00e48
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 33 deletions.
6 changes: 6 additions & 0 deletions README.md
View file
Expand Up @@ -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.
Expand Down Expand Up @@ -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

Expand Down
81 changes: 50 additions & 31 deletions dev2.html
View file
Expand Up @@ -6,42 +6,49 @@
<script src="libs/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="src/fixto.js" type="text/javascript" charset="utf-8"></script>
<style>
body {
padding:20px;
font: 14px/21px "Trebuchet MS", Helvetica, Verdana, sans-serif;

}
.csticky-holder {
/* transform: translate(0);
-webkit-transform: translate(0);*/
}
.csticky, .absolute {
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;
}
</style>
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;
}
</style>
</head>
<body>
<ul class="cstickies" >
<li class="csticky-holder">
<div class="csticky">
Sticky
</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>
<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">
Expand All @@ -63,7 +70,7 @@
</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>
Expand All @@ -83,14 +90,21 @@
</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>
<li class="csticky-holder-do-not-mind-bottom-padding">

<div class="csticky-do-not-mind-bottom-padding">
Parent's bottom padding is not respected due to disabled "mindBottomPadding" option
</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">
Absolute Sticky
</div> -->
<div style="height:700px"></div>
<div style="height:1000px"></div>



Expand All @@ -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
});

</script>
</body>
Expand Down
2 changes: 1 addition & 1 deletion grunt.js
View file
Expand Up @@ -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/' +
Expand Down
7 changes: 6 additions & 1 deletion src/fixto.js
View file
Expand Up @@ -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);
Expand Down

0 comments on commit dd00e48

Please sign in to comment.