CODEWITHSUNDEEP
jquerycss
Armin
Armin

Reputation: 147

How to Maintain Parent Width for a Fixed Floating Div that Requires Position:Fixed

Here is the page with the problem: Link.

Look at the right sidebar with the pink background that says POLL. That sidebar currently scrolls down as a fixed floating div. That's fine.

The problem is that it changes widths when the scrolling triggers it into going into position:fixed. I have changed the background color to yellow so that you can see it happen. Obviously, I want to maintain the width.

This is a responsive site, so pixel widths are not an option.

The CSS that controls it is:

#comment {
position: relative;
top: 0;
background:pink;
}

#comment.fixed {
position: fixed;
width:inherit;
top: 0;
background:yellow;
}

Making the width be inherit or 100% does nothing to fix what ails me.

The jquery code that controls the fixed div is at line 50 of the source. And the whole Poll area starts at line 339 in the source. In case that helps additionally.

I understand that position:fixed turns the properties into inheriting the values of the viewport not its relative parents. But I'm guessing there is a solution... I don't mind if it involves some additional javascript or jquery to kick it into behaving.

Thanks.

Upvotes: 3

Views: 1869

Answers (1)

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33870

You can set the CSS dynamicly like that : 

var newWidth = $('#comment').parent().width();
$('#comment').width(newWidth);

Then when you remove the class fixed, you just have to add that line :

$('#comment').removeAttr('style');

Upvotes: 2

Related Questions