Please help! I have a problem with this jQuery code

[wilbersoft]

Now this is the code:

<script
type=’text/
javascript’
src=’http://
ajax.googleapis
.com/ajax/libs/
jquery/1.3.2/
jquery.min.js?
ver=1.3.2′></
script>
<script
type=”text/
javascript”>
$(function() {
var offset =
$(” .column-
right-
inner “).offset
();
var topPadding
= 15;
$(window).
scroll(function
() {
if
($(window).
scrollTop() >
offset.top) {
$(” .column
-right-
inner “).stop
().animate({
marginTop:
$(window).
scrollTop() –
offset.top +
topPadding
});
} else {
$(” .column
-right-
inner “).stop
().animate({
marginTop: 0
});
};
});
});
</script>

What it does is to keep the sidebar with the “.column-right-inner” class scrolling as you scroll down the blog.

But the problem with this code Is that it keeps pushing down my footer section. so my footer section cannot be seen.

Pls is there anyway I can do it so that it when the sidebar comes to the footer section it will remain dynamic? ie it’ll not push it down anymore.

Note: I used the jQuery code on the sidebar of my blogger blog.

[Paulie_D]

Perhaps you could demo the issue in a Codepen.io example rather than just dropping a pretty unreadable lump of code on us?

Help us help you. —-> Tips Box

[itsLeon]

Well there are 2 things you can do.

First is the all javascript way like you did now only you need to check a few things.
– Is the website scrolling?
– What is the height of “.column-right-inner”
– What is the bottom position (height of “.column-right-inner” + scollTop position)
– What is the position of the footer
– Is the “.column-right-inner” bottom position near the footer

The other option is to use position fixed (css) so that you only need to check with javascript if the footer is near the “.column-right-inner” and then switch it to position relative?

[wilbersoft]

itsLoan, the second option looks less complicated since I’m not a jQuery expert myself. Pls how do I implement it?

[itsLeon]

Well its simpel but im not gonna wright your code but i will help you get along

in your code you use marginTop to push down “.column-right-inner” we can still use that.
The only part your code misses is the check to see where the bottom of “.column-right-inner” is and what the position of the footer is.

So you need to create a variable with the bottom position of “.column-right-inner” (height + offset)

Then you will need to know when the footer starts so the offset top of the footer.

We now know where the bottom of the column-right-inner is and that of the top of the footer. So we only have to check if the column-right-inner is bigger then the footer.

http://jsfiddle.net/ht6784dt/1/

[wilbersoft]

Please can’t you help me with the full code? i’m still learning javascript and this code looks too complicated for my understanding.

[Paulie_D]

Please can’t you help me with the full code? i’m still learning javascript and this code looks too complicated for my understanding.

That’s not what CSS-Tricks is for…we’re not a tutorial site.

Sure we can help you debug a particular issue but if you don’t understand what the code is doing it won’t help you learn.

[__]

Please can’t you help me with the full code?

If you want someone to write code for you, then you should be advertising for a paid job.

i’m still learning javascript and this code looks too complicated for my understanding.

Then start learning with something simpler. If you want to learn, you’ll get plenty of help doing so.

[Author]

Posts