Archived topic
Stop sticky widget being sticky before it reach bottom of the page
5 replies · Started by Pintu on September 14, 2022
Hi, I've added the following CSS
@media(min-width: 769px) {
.inside-right-sidebar {
height: 100%;
}
.inside-right-sidebar .widget:last-child {
position: -webkit-sticky;
position: sticky;
top: 70px;
}
}to make the last widget sticky in the sidebar and it is working fine. However, I want to customize it further.
Is there any way to stop the sticky widget from being sticky as soon as it reaches near the bottom of the page while scrolling?
Fixed Widget and Sticky Elements for WordPress plugin got the function I'm wanting to implement but I want CSS for this.
Please help, thanks in advance.
Hi there,
try adding this CSS instead:
@media(min-width: 769px) {
.inside-right-sidebar {
min-height: 100%;
}
.inside-right-sidebar .widget:last-child {
position: -webkit-sticky;
position: sticky;
top: 70px;
margin-bottom: 60px;
}
}The difference is the height: 100%; is changed to min-height: 100%;
It didn't work.
You can see the ad is still sticking till the bottom of the page.
I updated the CSS above to include the margin-bottom: 60px; property. Give that a try.
Got it.
Thanks for the help. :)
You're welcome
