sticky contact – moving

or we go and have some inspiration:

just one moment i try to simplify that code a bit. …
so it might be temporarly not available or not function
https://webers-testseite.de/impressum/

maybe you remove the link now ;) on here

• This reply was modified 5 years, 9 months ago by Guenni007.

ok here we go:
( i styled it here only for my page with ID: 2466 – if you want to have it everywhere – remove the if clause – but don’t forget to delete the last but one closing curly bracket then too!)
it is recomended to use a child-theme
both comes to child-theme functions.php

first : the container itself placement

add_action('ava_main_header', function() {
if(is_page(2466)){
echo '<div class="fixed-tel">
        <a id="klick" class="telephone" href="tel:+492289768293">
            <span class="phone-icon">+49 228 9768293</span>   
        </a>
    </div>';
}
});

Second: the function for animation:

add_action( 'wp_footer', 'fixed_contact_script' );
function fixed_contact_script() {
if(is_page(2466)){
?>
<script type="text/javascript">
(function($){
    $(function(){
        $('.fixed-tel').data('size','big');
    });
    $(window).scroll(function(){
        if($(document).scrollTop() > 10){
            if($('.fixed-tel').data('size') == 'big')
            {
                $('.fixed-tel').data('size','small');
                $('.fixed-tel').stop().animate({
                    top:'42px'
                },700);
            }
        }
        else{
            if($('.fixed-tel').data('size') == 'small')
            {
                $('.fixed-tel').data('size','big');
                $('.fixed-tel').stop().animate({
                    top:'50%'
                },700);
            }  
        }
    });
})(jQuery);
</script>
<?php
}
}

this comes to quick css:

.fixed-tel {
    top: 50%;
    right: -165px;
    position: fixed;
    z-index: 10;
    background-color: #1ecaed;
    border: 2px solid #fff;
    border-right: none !important;
}

#klick { padding: 20px; display: block }

.phone-icon::before {
    content: "\e854";
    font-family: entypo-fontello;
    padding-right: 18px;
    font-size: 30px;
    top: 3px;
    position: relative;
}

.fixed-tel:hover { right: 0 !important }
.fixed-tel a:hover { text-decoration: none }
.telephone { color: #fff !important }

if you don’t like the hidden part of that telephone field – just set the right positioning to 0 – and remove css for fixed-tel:hover)
if you like to link to your contact page just change href in: echo '<a class="telephone" href="tel:+492289768293"> and adapt the content ( maybe the icon to: \e805 )
if you like to have that phone field over the slided in hamburger menu – set the z-index to 1000
some positioning depends on your header height ( and if you have f.e. top bar etc.

Result as mentioned above see here: https://webers-testseite.de/impressum/

danke – nimm den link noch hier weg: Referenzseite

Thank you – also for the reminder.