Floating widget to the primary sidebar

  • Resolved raizaduran

    (@raizaduran)


    8 years, 8 months ago

    Let’s say, there are 4 widgets I’ve in the primary sidebar, what I want here is, out of the 4, one widget should be in floating manner, which should start floating as we scroll down the post content.

    Currently, in a long content blog, while scrolling down, after the 4 widget surpasses, it starts showing a blank sidebar at the right side of the content page.

    bdbrown has suggested this plugin in a similar post,but not sure if this would suffice the need.

    Moreover I’m trying to figure out, if this feature can be made in some tweaks with the code rather installing a plugin to achieve this.

    Here is an example of long content blog: https://www.indiavirtualinfo.com/blog/15-amazing-monsoon-getaways-around-pune/

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi raizaduran. Did you try the plugin? If it works, but you don’t want to use it, you can look at the CSS it applies and then copy that to your custom CSS.

    Thread Starter raizaduran

    (@raizaduran)

    Hi bdbrown, yes now I tried this plugin and it solves my problem.

    But can’t figure out, which css to copy to make it working without the plugin as well.

    Please help.

    check this page: https://www.indiavirtualinfo.com/blog/15-amazing-monsoon-getaways-around-pune/

    If you inspect the code with the widget below the top of the page (i.e. it’s not sticky yet) you’ll see these two elements:

    <div class="sticky-element-placeholder" style="width: 0px; height: 0px; margin: 0px; padding: 0px;"></div>

<div id="text-5" class="widget widget_text sticky-element-original sticky-element-active" style="">

    After the widget gets to the top of the page the plugin adds inline styling to make it stick:

    <div class="sticky-element-placeholder sticky-element-active" style="display:block; float:none; flex:0 1 auto; box-sizing:content-box; clear:none; overflow:hidden; transform:none; width:340px; height:621px; margin:0px 0px 0px 0px;"></div>

<div id="text-5" class="widget widget_text sticky-element-original" style="position: fixed; left: 1102.5px; top: 20px; width: 300px; margin-left: 0px; padding: 20px; margin-top: 0px; z-index: 1;">

    The problem is that the plugin uses javascript to determine when the widget reaches the top of the page, which significantly complicates the coding. If you were trying to sticky an object that was already at the location you wanted it to stay, then you could just insert the sticky CSS. In your case it’s easier to just use the plugin.

    Thread Starter raizaduran

    (@raizaduran)

    In your case it’s easier to just use the plugin.

    I guess you’re right. I’d better stick with the plugin only for now ??

    Well, thanks a lot for the help.

    You’re welcome.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Floating widget to the primary sidebar’ is closed to new replies.