I already have most of the code to successfully float my sidebar and make it follow your scrollbar.
The problem I have however, is that there is a small margin between the sidebar and the footer when the scrollbar reaches its end.
How do I correct this little margin? Nothing, that important but I do want to fix it badly.
About tab
Thanks!
There’s a large margin on my screen, because the floating part is fixed to the top of the page.
What seems to be worse though, is when you resize the browser window so that the floating part is taller than what can fit on the screen. When you then scroll to the end, the floating part pushes the footer further away.
so how can I get this to work? i just want the sidebar to follow you so that its visible when you scroll from where it is initially positioned to the footer all the way down.
It seems that you are wanting different things depending on where the scroll is. At the top of the page you want the floating sidebar to be aligned with the top, and at the bottom of the page you want it aligned with the bottom.
What happens when you’ve scrolled half-way down? Do you want the floating sidebar to still be aligned with the top of the screen? What then when further down? Do you want it aligned still with the top, or with the bottom?
Or do you want it to gradually move down the screen as you scroll down, so that when you’ve scrolled halfway, the floating sidebar will also be halfway down the screen, and when you’ve scrolled to the bottom the sidebar is at the bottom too.
Give some details of what you actually want, because what I’ve just described are only a few of the possible scenarios.
Yes, what I wish to achieve is your last scenario, except bottom is footer
Okay then, what do you need to know in order to achieve that?
how i can edit my current code to do what i want with no glitch
That is something that involves quite a few calculations. You’ll need to know the bottom of the header and the top of the footer, and from their difference remove the height of the floating sidebar. What remains is the total amount of movable distance for the floating sidebar.
From that movable difference, you would then want to position the floating sidebar along that section based on the percentage of the page that has been scrolled.
That percentage starts from when the bottom of the header is at the top of the page, and ends when the top of the footer is at the bottom of the page. In between those two extremes is the area of interest, and it’s how far that the page has scrolled between those two points which determines how far to push the floating sidebar down the page.
It all gets rather complex really, but if you put your mind to it you can sort it out. We can definitely help you to answer any questions about how to do any parts that you might get stuck on.
OK, I came up with this code but it doesn’t seem to work
$(window).scroll(function() {
var dynamicSidebarHeight = $('#sidebar').height();
if ($(window).height() > dynamicSidebarHeight) {
var fixedFooterOffset = 350;
var scrollTo = $(window).scrollTop()
var calculatedMaxTop = $('#footer').offset().top - dynamicSidebarHeight - fixedFooterOffset;
var fixedHeaderOffset = 400;
var viewportHeight = $(window).height();
if (scrollTo > calculatedMaxTop) {
scrollTo = calculatedMaxTop;
}
else if (scrollTo < fixedHeaderOffset) {
scrollTo = 0;
}
else
{
scrollTo -= fixedHeaderOffset - viewportHeight/2;
}
$('#sidebar')
.animate(
{ top: scrollTo + 'px' },
{ queue: false, duration: 500, easing: 'easeInOutSine' }
);
}
});
It seems like that element doesn’t want to reposition itself according to the top property. You can try it out with marginTop instead to confirm that the script is running though.
You’ll only have refinements to make to the script once you get the sidebar actually moving.
Thanks for helping me and guiding me through, I’m almost there!
The sidebar is scrolling as intended however there are still problems.
When the page isn’t long enough, the sidebar should still scroll to the footer, but it doesn’t.
Also, when the page is long enough, when the sidebar reaches the footer, it is still possible to scroll even further down infinitely with the sidebar pushing the footer down.
I was wondering if it would be possible to make the footer absolute, but not screw up everything.
There might be a few calculations that need refinement.
The two places that seem to most require checking are shortly after the header has scrolled off the top of the page, and shortly before the footer appears at the bottom of the page.
Nearly all web browsers support console.log() so you should be able to use that to ensure that the numbers make sense.
Did you read my main problems? The answer you have given doesn’t seem to answer my problem
OK got it working
$(window).scroll(function() {
var dynamicSidebarHeight = $('#sidebar').height();
if ($(window).height() > dynamicSidebarHeight) {
var fixedFooterOffset = 350;
var scrollTo = $(window).scrollTop()
var calculatedMaxTop = $('#footer').offset().marginTop - dynamicSidebarHeight - fixedFooterOffset;
var fixedHeaderOffset = 350;
if (scrollTo > calculatedMaxTop) {
scrollTo = calculatedMaxTop;
}
else if (scrollTo < fixedHeaderOffset) {
scrollTo -= fixedHeaderOffset - 350;
}
else {
scrollTo -= fixedHeaderOffset - 350;
}
$('#sidebar').animate ({
marginTop: scrollTo + 'px' }, {
queue: false,
duration: 500,
easing: 'easeInOutSine'
});
}
});
The only problem that remains is when I resize the window and scroll down, my second problem reoccurs. It seems the only viable solution would be to make the footer unmovable. How could this be done?
Why is the footer offset explicitly set at 350? Could that be the cause of the problem, and can the value be calculated instead?
shouldnt make a difference as the footer offset only appears in the inequality
That’s not the only solution. What seems to be a more viable solution is to ensure that the sidebar is not positioned so low that it causes the footer to be pushed away from it.
That does make sense however I don’t know how I can do that
Let’s try and figure out how then.
You’ll need the calculations used to work out the positioning of the sidebar when you’re at the bottom.
You’ll also need to work out the largest value that the sidebar position can possibly be, before the sidebar starts pushing against the bottom of its container.
Once you have that information, you should be able to update the script so that the sidebar keeps its proper distance away from the bottom of its container.
Got it working like you said, however it wouldn’t be possible to have the sidebar hit the footer but not push it?