[Support request] Down arrow in top full width/height container

[Michael]

Hello

I am currently trying to find a nice solution while implementing an arrow within my section (please check the private section to see the URL).
Saw 1-2 previous but quite old threads here with a similiar topic, however, I am not quite happy with the current solution done within the container and an arrow down button with padding top of 350px.

Is there a better solution to implement this which makes it float at the bottom of the top fullscreen section no matter what screen size we have?
I tried to have the arrow as a background image but this was always hidden behind the current fullscreen background image (even if I changed the z-index value).

Thanks a lot
Michael

[Ying]

Hi Michael,

You can set the container Minimum Height to 100vh under the Spacing tab.
https://www.screencast.com/t/5g3atMlKZ

Also add thebuttons block to this container as well, set the vertical alignment to bottomfor this container.
https://www.screencast.com/t/I6btEvPZupe7

Let me know if this helps 🙂

[Michael]

Hi Ying

Sorry for my late reply, I had to wait for the customer to response as well.

I think the button/arrow down is positioned nice now. In addition, I would like to hide it on scroll using JavaScript.
By using the following code I thought it should work, but unfortunately it does not:

// Function to let the arrow down disappear after scroll
add_action('wp_footer', 'disappear_on_scroll_script', 9999);
function disappear_on_scroll_script() {
    ?>
<script>
$(document).ready(function(){
    $(".scroll-down-disappear").click(function(){
        $("a").addClass("scroll-down-disappear");
		$("#arrow-down-icon").hide();
    });
	$(window).onscroll(function() {
    if ($(this).scrollTop() > 0) {
        $("#arrow-down-icon").hide(); // Hide the element
    }
	});
})(jQuery);
</script>
    <?php
}

Any idea what I am doing wrong here?

Thanks a lot

[Ying]

We are happy to help with theme related questions, but this is beyond the scope of this forum.

Please refer to this:
https://generatepress.com/what-support-includes/

Thanks for your understanding 🙂

[Author]

Posts