Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • June 7, 2023 at 10:31 am #1409843
    Stilecatalini

    Hello guys!
    I have one page website so only some pages is open out of my home so it’s not there the header.
    Is it possible to have a sticky close button (X) that hide when scrolling down and shows when scrolling up? Background black transparent and X white.
    Check my page and look at the bottom where now there is a fixed close button. I would the same button but at the top and that hide on scroll. It’s more comfortable and intuitive.
    Hope you understand..
    In private content my site.
    Thanks

    June 10, 2023 at 3:26 pm #1410154
    Mike

    Hey Stilecatalini,
    Thanks for your patience and the link to your site, I see your sticky close button at the bottom of your page, but it links to the homepage “Barche” section, so this is more like a “back” button than a “close” button.
    Nonetheless to add this button to your three pages venticinque, venticinque-panoramica, ventuno-sport-fisherman and have it hide on scroll down and show on scroll up, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_back_button() { ?>
  <script>
(function($){
  var button = $('<div class="avia-button-wrap avia-button-right back-button"><a href="https://www.stilecatalini.it/#barche" class="avia-button avia-icon_select-yes-left-icon avia-size-large avia-position-center av-button-notext avia-color-light avia-font-color-white"><span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title"></span><span class="avia_button_background avia-button avia-color-theme-color"></span></a></div>');
  if ($("body").hasClass("page-id-738") || $("body").hasClass("page-id-5837") || $("body").hasClass("page-id-5667") == true) {
  $(button).prependTo('#wrap_all');
  } else {}
})(jQuery);
  
(function() {
    var doc = document.documentElement;
    var w = window;
    var prevScroll = w.scrollY || doc.scrollTop;
    var curScroll;
    var direction = 0;
    var prevDirection = 0;
    var backButton = document.querySelector('.back-button');
    var checkScroll = function() {
        curScroll = w.scrollY || doc.scrollTop;
        if (curScroll > prevScroll) {
            direction = 2;
        } else if (curScroll < prevScroll) {
            direction = 1;
        }
        if (direction !== prevDirection) {
            toggleButton(direction, curScroll);
        }
        prevScroll = curScroll;
    };
    var toggleButton = function(direction, curScroll) {
        if (direction === 2) {
            backButton.style.opacity=0;
            prevDirection = direction;
        } else if (direction === 1) {
            backButton.style.opacity=1;
            prevDirection = direction;
        }
    };
    window.addEventListener('scroll', checkScroll);
}
)();
</script>
  <?php
}
add_action('wp_footer', 'custom_back_button');

    and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .back-button {
    position: fixed;
    top: 1%;
    right: 1%;
    z-index: 999;
    background-color: transparent;
}

    Best regards,
    Mike

    June 11, 2023 at 1:52 pm #1410222
    Stilecatalini

    Hi, is it possible to have it like the header in my homepage? I mean a full width screen band with the same features (transparency, blurry effect, hide on scroll down, etc…) with at the center the button (X)? Please check also my header in my homepage that not hide when scroll down in MOBILE.
    Thanks.
    I share my data account if you want check the css code…

    June 11, 2023 at 6:07 pm #1410262
    Mike

    Hi,
    Unfortunately I can not make this look like the header, I also fixed the mobile header please check.

    Best regards,
    Mike

    June 12, 2023 at 1:02 am #1410297
    Stilecatalini

    No. In the Venticinque page and the others, there is nothing button! Check!

    June 12, 2023 at 1:48 am #1410300
    Mike

    Hi,
    I added it for you

    Best regards,
    Mike

    June 12, 2023 at 10:15 am #1410315
    Stilecatalini

    No. There isn’t! I’m checking..

    June 12, 2023 at 10:18 am #1410316
    Stilecatalini

    Ok. There is but I don’t like! If is possible to have the same effect of the header yes…otherwise i will di without them and leave it like this.

    June 12, 2023 at 11:08 am #1410318
    Mike

    Hi,
    Ok, shall I remove it then?

    Best regards,
    Mike

    June 12, 2023 at 11:32 am #1410326
    Stilecatalini

    Yes. Thanks..
    Is there another better way? What do you suggest?

    June 12, 2023 at 12:13 pm #1410329
    Mike

    Hi,
    Ok I disabled it for you, it is in your WPcode plugin should you change your mind in the future.
    The only other idea that I would have is to change the header to show on those pages and then use the same button script to replace the burger button on those page, so you have the same header but instead of a mobile menu button you will have the white box button with the “X” like at the bottom of those pages.

    Best regards,
    Mike

    June 12, 2023 at 1:16 pm #1410340
    Stilecatalini

    Ok. If you can, show me that..
    Thanks

    June 12, 2023 at 6:17 pm #1410364
    Mike

    Hi,
    I added this code to your WPCode plugin as a javascript snippt and enabled the header on the three pages and now the burger menu is replaced with the back button you had created at the bottom of those pages, please clear your browser cache and check.

    window.addEventListener('DOMContentLoaded', function() {
(function($){
  var button = $('<div class="avia-button-wrap avia-button-right back-button"><a href="https://www.stilecatalini.it/#barche" class="avia-button avia-icon_select-yes-left-icon avia-size-large avia-position-center av-button-notext avia-color-light avia-font-color-white"><span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title"></span><span class="avia_button_background avia-button avia-color-theme-color"></span></a></div>');
 if ($("body").hasClass("page-id-738") || $("body").hasClass("page-id-5837") || $("body").hasClass("page-id-5667") == true) {
  $('.main_menu').prepend(button);
  $('.avia-menu.av-main-nav-wrap').css({'display':'none'});
  $('.main_menu').css({'display':'flex','align-items':'center'});
} else {}
})(jQuery);
});

    I tested on mobile & desktop and it works.

    Best regards,
    Mike

    June 12, 2023 at 6:42 pm #1410369
    Stilecatalini

    Good! Please remove the logo and put the button central. The “X” should be 18px (like all the “X” in the website) and without the border. Like the burger but X.
    Many thanks!

    June 13, 2023 at 12:49 pm #1410448
    Mike

    Hi,
    I added this css to your WPCode plugin:

    #top.page-id-738 .avia-standard-logo,
#top.page-id-5837 .avia-standard-logo,
#top.page-id-5667 .avia-standard-logo {
	display: none;
}
#top.page-id-738 .main_menu,
#top.page-id-5837 .main_menu,
#top.page-id-5667 .main_menu {
	display: flex;
    justify-content: center;
    width: 100%;
}
#top.page-id-738 .main_menu [data-av_iconfont='entypo-fontello']:before,
#top.page-id-5837 .main_menu [data-av_iconfont='entypo-fontello']:before,
#top.page-id-5667 .main_menu [data-av_iconfont='entypo-fontello']:before {
	font-size: 58px;
}
#top.page-id-738 .main_menu .avia-button,
#top.page-id-5837 .main_menu .avia-button,
#top.page-id-5667 .main_menu .avia-button {
	border: none;
}
#top.page-id-738 .main_menu .avia-button:hover .avia-color-theme-color,
#top.page-id-5837 .main_menu .avia-button:hover .avia-color-theme-color,
#top.page-id-5667 .main_menu .avia-button:hover .avia-color-theme-color,
#top.page-id-738 .main_menu .avia-button .avia-color-theme-color,
#top.page-id-5837 .main_menu .avia-button .avia-color-theme-color,
#top.page-id-5667 .main_menu .avia-button .avia-color-theme-color{
	background-color: transparent;
}

    please clear your browser cache and check the three pages.

    Best regards,
    Mike

    June 13, 2023 at 1:25 pm #1410456
    Stilecatalini

    Ok Mike. Many thanks! Slightly smaller.

    June 13, 2023 at 5:43 pm #1410484
    Mike

    Hi,
    Check now after clearing your browser cache.

    Best regards,
    Mike

    June 13, 2023 at 6:33 pm #1410491
    Stilecatalini

    It’s ok. Many thanks!

    June 13, 2023 at 6:34 pm #1410492
    Stilecatalini

    I don’t checked in desktop now..
    In mobile it’s ok.

    June 13, 2023 at 6:43 pm #1410494
    Mike

    Hi,
    Mobile and desktop are the same, let us know after you can check so we can close this thread.

    Best regards,
    Mike

    June 13, 2023 at 8:19 pm #1410501
    Stilecatalini

    It’s ok! Close this thread.

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Sticky close button in a page’ is closed to new replies.