css-position


Fix a div to the bottom while scrolling with skrollr


I'm trying to use Skrollr to fix an element to the bottom of the viewport, if the bottom of the element hits the viewport bottom. This part is fine.
The problem is, after - lets say 1000px - of scrolling, i want to continue the scrolling, while i change the above mentioned fixed element to static again.
<div class="header">Header</div>
<div class="height-placeholder" data-anchor-target="#fixed-element" data-0-bottom="display:none;" data--0-bottom="display:block;"></div>
<div id="fixed-element" data-0="#class:;" data-bottom="#class:stuck;" data-1000="#class:;">Fixed at the bottom for a while</div>
<div class="content">
Regular content...<br>
</div>
http://jsfiddle.net/bkccg8x5/2/
So my idea was to create a placeholder above the fixed element and when the fixed element is stuck to the bottom, i simply add this element, so when i unstuck the fixed element, it would continue to scroll normal without any jump.
The problem with this solution is that i defined a fixed height for the placeholder, and this way it will only work correctly at a certain viewport height. Makes things more complicated, that every element on the site has a fluid height, so i need a solution that will work in every resolution.
Any ideas?
I solved this by creating a 1000px tall container and when the bottom of the container is hitting the bottom of the viewport, i change the fixed element to absolute.
<div class="header">Header</div>
<div id="height-placeholder" data-0="#class:;" data-bottom="#class:unstuck;">
<div id="fixed-element" data-0="#class:;" data-bottom="#class:stuck;">Fixed at the bottom for a while</div>
</div>
<div class="content">
Regular content...<br>
</div>
Here is the demo, works fine with any height:
http://jsfiddle.net/bkccg8x5/3/

Related Links

how to create adjustable gap between elements (div)
How to properly apply a css hack for IE11 transition misbehaviour
How do you make leaflet popup window full screen on small screens?
Fix a div to the bottom while scrolling with skrollr
Sticky Footer at bottom of PAGE, not just bottom of WINDOW
How to set div absolute position from the parent div
Polymer paper-fab with position:fixed behaves strangely when used with core-list that has a scrollTarget
What is the use of “static” positioning in CSS?
CSS: fixed position
Style sheet positioning won't keep everything in place
Div on top 100%
CSS float image align
google sites html box tool css postion absolute
Manual Positioning of Shareaholic ShareBar Plugin
Div position (margin:auto)
Removing or Hiding Blank Space Left by Relative Positioning

Categories

HOME
beautifulsoup
fabricjs
localization
polymer
shiro
simulink
hugo
title
special-characters
fabric.io
android-securityexception
endpoint
android-intent
http-post
feathersjs
imagemap
href
r-mice
dataflow-diagram
siri
beautifier
custom-post-type
spotipy
magento-1.8
userdefaults
livelink
left-join
android-gridview
sendbird
joomla2.5
latitude-longitude
docfx
salesforce-communities
claims
apache-spark-dataset
facebook-social-plugins
magento-2.0.7
builder
automapper-5
clarifai
x-ray
zenhub
boxing
arules
dt
seq
mathcad
cudd
file-uri
uicolor
xdoclet
deep
nss
lz77
piracy-prevention
crouton-os
qt5.2
extjs-grid
uncompress
liquid-layout
post-commit-hook
appserver
mdichild
with-statement
named-parameters
parallel-testing
matrix-inverse
extjs2
ecslidingviewcontroller
notorm
modular
unit-of-work
ui-select2
virtual-pc
sqlclr
jquery-blockui
saleslogix
wcf-configuration
boost-signals
usertype
predicatebuilder
node-redis
data-mapping
skype4java
silverlight-oob
wcf-instancing
escrow
fail-fast-fail-early
dsoframer

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App