[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
  • #1352092

    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?

    Customer Support

    Hi there,

    Are you using the sticky navigation option?

    If not we might be able to make that work.


    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

    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>
    var scrollPosition = window.scrollY;
    var stickyBar = document.getElementById('sticky-bar');
    window.addEventListener('scroll', function() {
        scrollPosition = window.scrollY;
        if (scrollPosition >= 200) {
        } else {

    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;

    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


    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

    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.