Rendering issue when parent element is smaller than fixed div height - fix included

[vandanagopal]

Hi,
Am facing an issue where I attach my fixed div to the body of the page. But the body height itself is just 119. But the height of the fixed div is 350. In that case the fixed div gets a negative top value and is hidden at the top of the page.
To fix this, I changed this line in fixto.js in the _adjust function -

diff = (this._parentBottom - this._scrollTop) - (this.child.offsetHeight + computedStyle.toFloat(childStyles.marginBottom) + mindTop + this.options.top);

The value for this._parentBottom is the body height which is 119. But this.child.offsetHeight is 350. So diff becomes negative and child.top becomes negative.
Changed it to

diff = Math.abs((this._parentBottom - this._scrollTop) - (this.child.offsetHeight + computedStyle.toFloat(childStyles.marginBottom) + mindTop + this.options.top));

Then this line:

if(diff>0) {
                diff = 0;
            }

Sets it to 0.
But now I wonder what is the use of the diff variable? It will most likely always be 0 with my change.
Please advise.
Thanks.

[bbarakaci]

I think you could investigate why your body is shorter than it's content.
Might be floating, or absolute, fixed elements that goes out of the normal
document flow. If it is because of floating elements, read about clearing
the floats.

On Tuesday, 5 July 2016, Vandana Gopal [email protected] wrote:

Hi,
Am facing an issue where I attach my fixed div to the body of the page.
But the body height itself is just 119. But the height of the fixed div is
350. In that case the fixed div gets a negative top value and is hidden at
the top of the page.
To fix this, I changed this line in fixto.js in the _adjust function -
diff = (this._parentBottom - this._scrollTop) - (this.child.offsetHeight +
computedStyle.toFloat(childStyles.marginBottom) + mindTop +
this.options.top);

Changed it to
diff = Math.abs((this._parentBottom - this._scrollTop) -
(this.child.offsetHeight + computedStyle.toFloat(childStyles.marginBottom)

• mindTop + this.options.top));

Then this line:
if(diff>0) {
diff = 0;
}
Sets it to 0.
But now I wonder what is the use of the diff variable? It will most likely
always be 0 with my change.
Please advise.
Thanks.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#43, or mute the thread
https://github.com/notifications/unsubscribe/ABtwNJmt7f8EWthi5C4B6XB2SSGCfEmRks5qSscJgaJpZM4JFiAU
.

[vandanagopal]

Yes it is due to floating elements. However I do not have control over it since I am using Zurb foundation to render the page - foundation has it's own css and javascript which is setting various elements to floating.
I guess this is not a common scenario - i.e to use Foundation with fixto.js? If it is not, please feel free to close the issue.

[bbarakaci]

Try adding .clearfix to the body http://foundation.zurb.com/sites/docs/float-classes.html