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.
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: http://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.
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.
