Stickem + 100% height
# July 8, 2014 at 5:06 am
I downloaded the demo and updated the mark-up and classes to match what I have on my page – which worked great. Then I updated some of the CSS and the page stopped working…
I have 100% height set on
<div class="mid">. Which stops the plug-in from working (adding the class to the sticky element). Presumably because the 100% height on the elements means it has no point of reference for when the element I want to ‘stick’ has touched the top of the browser.
The reason for the 100% height div’s:
The header and footer are fixed at the top and bottom of the browser window. The “container” div is just inside the body and is needed for my off-canvas navigation. The #mid element has top/bottom padding so the content does not go behind the fixed header/footer and
height: 100%;is declared to it sits between the header/footer and scrollbar (when visible) does not run behind. Obviously because of this, its parents (html > body > #container) all need
height: 100%;too for the height to work on the #mid element.
Does anyone know of a way possible around this? Maybe by targeting the position of #mid instead? Or is it just a case that it won’t work if the html/body are set with 100% height?
Steve# July 9, 2014 at 1:55 am
This reply has been reported for inappropriate content.
Going through some “issues” on the github page I noticed someone had updated the code so you could specify what the container was instead of using the window height/width using “scrollContainer”: https://github.com/davist11/jQuery-Stickem/pull/24
This is great and gets the plug-in functioning the way I need it….
Unfortunately I can’t keep the box the same width or exactly in the same position when
position: fixedis set. Basically because fixed takes it out the document flow and its a percentage based layout its almost impossible to keep the box the EXACTLY the same size. And the position is off to as it doesn’t take in to consideration the scrollbar – which is obviously a fixed width.
The (new) question
When the class of
stickitis added onto the div which is positioned absolutely, how can I set a top value onto the element which updates while scrolling down the page. Then when the class of
stickit-endis added (when it reaches the bottom of the container) the value is removed?
Thanks, hope someone can help!
You must be logged in to reply to this topic.