[Resolved] Floating button or popup button options

Home Forums Support Floating button or popup button options

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1352092
    nomadiceman

    Hi guys,

    How can I get a button to pop up or slide in on my single posts?

    The link attached has a fading in button at the top of the page

    What is the optimum way to achieve this? My site is getting 95% in pagespeedinsights and i dont want to ruin that

    Basically I am looking for a button that’s on the post pages so that the reader can click to be taken to another page, very simple

    Any ideas?

    #1352275
    Leo
    Staff
    Customer Support

    Hi there,

    Are you using the sticky navigation option?

    If not we might be able to make that work.

    #1352278
    nomadiceman

    Hi Leo,

    Im not using the sticky navigation or the secondary navigation option in gp pro

    I was thinking about the sticky nav but not sure how to implement it

    #1352381
    David
    Staff
    Customer Support

    Hi there,

    it requires some custom development.
    This will get you started.

    1. Create a new Hook Element
    2. Add this to the hook conent:

    <div id="sticky-bar" class="sticky-top-bar">
    	<div class="grid-container">
    		<a class="button" href="#">Sticky Bar Button</a>
    	</div>
    </div>
    
    <script>
    var scrollPosition = window.scrollY;
    var stickyBar = document.getElementById('sticky-bar');
    
    window.addEventListener('scroll', function() {
    
        scrollPosition = window.scrollY;
    
        if (scrollPosition >= 200) {
            stickyBar.classList.add('bar_stuck');
        } else {
            stickyBar.classList.remove('bar_stuck');
        }
    
    });
    </script>

    3. Select the after_footer hook
    4. Set your Display Rules
    5. Publish the hook and add this CSS to your site:

    .sticky-top-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        background-color: #ccc;
        padding: 5px;
    }
    
    .sticky-top-bar.bar_stuck {
        opacity: 1;
        pointer-events: auto;
    }
    
    .sticky-top-bar .grid-container {
        text-align: center;
    }
    
    .admin-bar .sticky-top-bar {
        margin-top: 32px;
    }
    #1353185
    nomadiceman

    this worked great. There is a weird effect in chrome though. If you scroll up the page goes above the top of the page, very strange

    #1353226
    nomadiceman

    i deleted the lightweight social icons plugin and it fixed that weird scrolling effect

    ive updated the website link for you to see the button in action. works and looks great

    thank you again for the awesome support

    #1353410
    David
    Staff
    Customer Support

    Nice – looks good 🙂
    Glad to be of help

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