floating div scroll w/ jQuery + CSS

[drone4four]

I found a guide for setting up a scrolling sidebar box with jQuery: http://html-tuts.com/jquery-scroll-div-sidebar/

My objective is to have the sidebar floated to the right of some text as the user scrolls down the page. I am using jQuery, but I think my problem is more related to the CSS I am playing with.

Here is my copy and paste of the example code (with slight modifications): http://codepen.io/Angeles4four/pen/YPBrGG

By modification I mean I added some lorem ipsum content to the markup and I added some basic CSS elements (h3, body).

Among other modifications, I changed the values to the float and position properties. I actually tried a few different values, like absolute, relative, auto, and pixel numbers. None of these changes helped get me where I want to go.

I also tried assigning a -550px value to a right property within the scrollingBox rule which does make the Box appear on the right, but now it doesn’t scroll at all when you move down the page (additionally there is an unnecessary gap between “Some Widget Title” and “Some Text”). By commenting out the right property it successfully scrolls, but then it overlaps the text.

And notice when you change the sidebarBox’s width, its not just the individual box which changes in width of the whole body. Why is that?

Also notice the broken image? I know it’s broken because I kept it as a placeholder. I don’t have a dummy image. That’s not an issue I am troubleshooting right now.

Another significant point of modification, I created a list of items in place of the paragraph text in between the second scrollingBox divider tags. Is this problematic?

[Paulie_D]

A quick glance at the code shows me that you have a couple of things that don’t make sense so I suggest you review how you built this.

.sidebarBox {
    width: 500px; 
    float: center; /* no such value setting for float */
    position: right; /* no such value setting for position */
}

[Paulie_D]

Just download the files from that tutorial and it’s child’s play

http://codepen.io/Paulie-D/pen/PwVRKV

[Author]

Posts