I am currently working on a code to keep a fixed div ("two") in place between two absolute positioned divs ("one" and "footer") while scrolling.
However, there is an issue that arises when the browser window is resized. The distance between the footer and the point where the fixed div ("two") becomes unfixed either increases or decreases. This causes the fixed div to become unfixed before it reaches the footer or after it has already passed it.
Does anyone have any suggestions on how to address this problem?
Check out the DEMO here.
UPDATE (21 JULY 2016):
It appears that the issue stems from the fact that the width of the "leftside" div is set as a percentage. When the browser window is resized, the "leftside" div adjusts its height accordingly based on the content within it. As a result, the fixed position of div "two" remains static relative to the initial page load position.
I need to maintain the responsiveness of the design without reloading the page when scaling the browser window due to other functions on the website. Although refreshing the page after resizing does reset everything correctly, reloading is not a viable option for me.
Possible solutions include:
- Is there a way to dynamically reset the lowest possible position of div "two" upon window resizing?
- An even better approach might be to automatically and frequently reset the lowest possible position of div "two" whenever the user interacts with the webpage or scales the browser window. Given that collapsible segments within the "leftside" div can alter its height without adjusting the browser window size directly.
It seems like modifications may be required in this portion of the script(?):
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(setPosition);
setPosition();
};
Below is the complete script:
var window = this;
$.fn.followTo = function (from, bumper) {
var $this = this,
$window = $(window),
$from = $(from),
$bumper = $(bumper),
$startPos = $from.offset().top + $from.height(),
bumperPos = $bumper.offset().top,
thisHeight = $this.outerHeight(),
setPosition = function(){
if ($window.scrollTop() < $startPos) {
$this.css({
position: 'absolute',
top: $startPos
});
} else if ($window.scrollTop() > (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
};
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(setPosition);
setPosition();
};
$('#two').followTo('#one', '#footer');