[Resolved] Magically Floating Social Media

Home Forums Support [Resolved] Magically Floating Social Media

Home Forums Support Magically Floating Social Media

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1615923
    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!

    #1616373
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.