How do I stop End-less floating Div in JS?

[Saket]

I am building a new theme for my blog and I need to do it before 1st Jan. Its almost complete but I am encountering a problem:

See this post for example

The last 2 Widgets i.e., FEATURED POSTS and RECENT POSTS in sidebar are set to float (positioned absolute) so that they are always visible when a user scrolls down. But how do i stop floating after reaching the footer? Any help would be really appreciated.

EDIT: I found out this demo of a “floating anything in a constrained area“. But I’m not good with JS so I dont know how to take help with it. Help?

[Chris Coyier]

Why are you using images for your sidebar? You can easily achieve what you made with CSS. I think you might want to clean up your code. Your missing semicolon’s in some areas and I checked your markup validation and found that you have 26 Errors and 4 warnings. What you’re trying to achieve can be done with jQuery. Chris has a tutorial on this HERE.

[Saket]

Those Big images in blue, green etc are for testing purpose. They will be then replaced by post thumbnails.

And semi-colons? In the JS? Sorry but i dont know how to fix them, i followed this tutorial

Chris’s tutorial doesnt solve this problem. View the demo and increase the margin-top. This would make the content height shorter and thus menu will overflow :(

[Chris Coyier]

Not in the javascript. In your custom css file there are a few semicolon’s missing in some of the background codes.

[Saket]

Corrected most of the errors that I got while using W3C Validator (except pseudo-elements, don’t know how to fix them)

Now, the sidebar goes below the footer when scrolled to the bottom. How do I make it stop?

[clokey2k]

The jquery plugin would be a better way to go.

Include the plugin on the page like any other ‘js’ file. Then call it using a selector:

$('#sidebarsfloat').stickyFloat()

I haven’t tried it, but that should work. The #sidebarsfloat wont scroll higher or lower than the ‘div’ it is contained within. Give it a go?

[Chris Coyier]

I agree, jQuery would be the solution.

[Saket]

Na, it doesn’t work properly. Some other guy has contacted me and he’s helping me to do so I cant show you in the demo. Maybe tomm, I’ll add that JS code. I guess some problem with CSS

EDIT: I made it to work, that too without any knowledge of JS, just played with it a little. W00T!

[Author]

Posts