WordPress.org

Ready to get started?Download WordPress

Forums

Q2W3 Fixed Widget (Sticky Widget)
[resolved] Widgets below fixed widgets "jump" up (11 posts)

  1. marshmallowcreme
    Member
    Posted 1 year ago #

    Hi Max

    Great work on this plugin!

    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 would like those widgets to be displayed in the exact same position as they were before the top widget became fixed. After they continue scrolling, the lower widgets would then move behind the fixed widget like normal.

    Is there any way to push the non-fixed widgets down after the fixed widget becomes fixed?

    Thanks. :)

    http://wordpress.org/extend/plugins/q2w3-fixed-widget/

  2. Max Bond
    Member
    Plugin Author

    Posted 1 year ago #

    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!

  3. marshmallowcreme
    Member
    Posted 1 year ago #

    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.

  4. Alrik Vincent
    Member
    Posted 1 year ago #

    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 :) http://wordpress.org/plugins/drop-shadow-boxes/

  5. Max Bond
    Member
    Plugin Author

    Posted 1 year ago #

    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...

  6. angelcoding
    Member
    Posted 12 months ago #

    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.

  7. angelcoding
    Member
    Posted 12 months ago #

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

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

  8. Max Bond
    Member
    Plugin Author

    Posted 11 months ago #

    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!

  9. igors
    Member
    Posted 11 months ago #


  10. esmi
    Forum Moderator
    Posted 11 months ago #

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

  11. igors
    Member
    Posted 11 months ago #

    ОК!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags