[Resolved] Magically Floating Social Media

[André]

Hi, I’d like to add social share buttons to my site. I stumbled upon this thread https://generatepress.com/forums/topic/floating-social-media/ and amended it, so that it fits my site. I added the icons to the generate_inside_side_container because it should appear on some pages with a sidebar and posts without a sidebar. The mentioned hook makes it always appear on the left.

However, I have two issues. First, the icons appear once the page loads. I’d like them to appear if the user starts to scroll down. I understand I can achieve this by adding some JS, but I have no clue how.

Second, because the icons are added to the site_container hook, they move into the footer. I like them to move under the text like in this example: https://www.digitalmaas.com/blog/social-media-share-buttons-best-practices/. I guess I can use the same JS to change CSS classes when the user reaches the bottom of the page.

Which hook would be best to achieve this? And how does the CSS needs to look then?

Thanks!

[Elvin]

Hi,

However, I have two issues. First, the icons appear once the page loads. I’d like them to appear if the user starts to scroll down. I understand I can achieve this by adding some JS, but I have no clue how.

I’m afraid site customizations involving JS is out of our scope.

But to help you out, try this:

<script>
const stickyNav = document.querySelector('.floating-container');
var lastScrollTop = 0;

document.addEventListener("scroll", function(){ // or window.addEventListener("scroll", function(){
 var st = window.pageYOffset || document.documentElement.scrollTop;
   if (st > lastScrollTop){ //not top of scroll
       if(!stickyNav.classList.contains('sticky-state')){ //if it is NOT in sticky state
           stickyNav.classList.add('sticky-state'); //add sticky state
       }
   } else if(st == lastScrollTop){ //top of scroll
       if(stickyNav.classList.contains('sticky-state')){ //if it is in sticky state
           stickyNav.classList.remove('sticky-state'); //remove sticky state
       }
   } else {
		console.log("scrolling up"); 
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
</script>
<style>
.floating-container{
    display:none;
    position:relative;
}
.floating-container.sticky-state{
    position:sticky;
    display:block;
    top: 100px;
    height: 0;
}
</style>

Place it on a Hook Element hooked on wp_footer with display rule location set to the page you want it to apply. Not exactly sure if it’s going to work out of the box though. You may have to tinker with it a bit.

Which hook would be best to achieve this? And how does the CSS needs to look then?

You can use this Hook Visual Guide:
https://docs.generatepress.com/article/hooks-visual-guide/

Not exactly sure how the script will behave if placed on different hooks so you may have to test things around.

[Author]

Posts