Widgets below fixed widgets "jump" up

Hi!

My only problem is that when I scroll, and the widget become fixed, the widgets below the fixed ones then “jump” up behind the fixed one.

I understand your problem, but … this is behavior of the position: fixed css propertie. Fixed elements are renedered in another layer then standard elements. When element became fixed it dissapears from standard elements layer and jumping occurs.

I think you need to organize your sidebar in a different way. I always recommend to fix only last widgets in sidebar. Even without jumping sidebar looks bad when non fixed widgets are scrolling under the fixed one!

Some people make interesting thing. For example you have 3 widgets:
1. fixed
2. standard
3. standard

Widgets overlapping looks bad. Solution:
1. standard
2. standard
3. standard
4. fixed. This is the copy of the first widget!

That’s an ok solution.

I think an interesting approach might be to measure the height of the fixed widget, then once it becomes fixed, add that number of pixels to the top of the next non-fixed widget, as a margin.

I might help write the javascript, if you’re interested.

I had this very same problem. I fixed it by installing the Drop Shadow Box Plugin. I put the content I want to be fixed in the Drop Shadow Box Widget and then fixed it. That solved the problem ?? https://www.ads-software.com/plugins/drop-shadow-boxes/

marshmallowcreme!

I might help write the javascript, if you’re interested.

Yes, let’s try.
But this is not an easy task!..
The next widget may be fixed or may be not…

It’s actually quite easy. I customised the js file …

In the function fixed_widget(widget) add a couple more vars …

var widget_height = widget.obj.css('height');
var widget_replacement = widget.obj.attr('id')+'_replacement';

then after if ( !style_applied_bottom ) { … change to this…

widget.obj.css('position', 'fixed');
widget.obj.css('top', '');
widget.obj.css('width', widget_width);
widget.obj.css('margin', widget_margin);
widget.obj.css('padding', widget_padding);
if(jQuery('#'+widget_replacement).length <= 0) {
	widget.obj.after('<div id="'+widget_replacement+'" style="height:'+widget_height+';"></div>');
}
style_applied_bottom = true;
style_applied_top = false;
style_applied_normal = false;

then after if ( !style_applied_top ) { … change to this…

widget.obj.css('position', 'fixed');
widget.obj.css('top', widget.fixed_margin_top);
widget.obj.css('bottom', '');
widget.obj.css('width', widget_width);
widget.obj.css('margin', widget_margin);
widget.obj.css('padding', widget_padding);
					if(jQuery('#'+widget_replacement).length <= 0) {
	widget.obj.before('<div id="'+widget_replacement+'" style="height:'+widget_height+';"></div>');
}
style_applied_top = true;
style_applied_bottom = false;
style_applied_normal = false;

then after if ( !style_applied_normal ) { … change to this…

if(jQuery('#'+widget_replacement).length > 0) {
	jQuery('#'+widget_replacement).remove();
}
widget.obj.css('position', '');
widget.obj.css('top', '');
widget.obj.css('width', '');
widget.obj.css('margin', '');
widget.obj.css('padding', '');
style_applied_normal = true;
style_applied_top = false;
style_applied_bottom = false;

The code isn’t necessarily perfect but you get the idea. I’ve only tested on a top positioned sticky widget, which works very well. Not sure if it works as well with a bottom fixed widget.

Anyway, hope it helps.

In case you want a demo of the above code working, have a look at https://tipsrated.com

Cheers and thanks Max for the plugin in the first place. Very useful!

Greetings to all!

The new plugin version – 4.0 is released just now.
Widget jumping now is fixed! Thanks to angelcoding!
I have implemented his approach with some modifications.
Please test!

These are English language forums, so please use English. Alternatively, use a WP support forum in your language.

ОК!