Floating button or popup button options

[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?

[Leo]

Hi there,

Are you using the sticky navigation option?

If not we might be able to make that work.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[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

[David]

Nice – looks good 🙂
Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts