Plugin contact fixed – Cố định liên hệ dưới chân trang

gistfile1.txt

<style>
        @media (min-width: 561px) {
            .devvn_toolbar {
                position: fixed;
                bottom: 10px;
                left: 10px;
                z-index: 99999999;
            }

            .devvn_toolbar ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            .devvn_toolbar ul li {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            .devvn_toolbar ul li a {
                display: block;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                margin: 0 0 5px;
                position: relative;
                background-position: 50% 50%;
                background-size: cover;
            }

            .devvn_toolbar ul li a br {
                display: none;
            }

            .devvn_toolbar ul li a span {
                font-weight: 400;
                color: #ffffff;
                position: absolute;
                top: 50%;
                left: calc(100% + 10px);
                left: -webkit-calc(100% + 10px);
                left: -moz-calc(100% + 10px);
                margin-top: -12.5px;
                font-size: 14px;
                height: 25px;
                line-height: 25px;
                padding: 0 10px;
                border-radius: 5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                white-space: nowrap;
                opacity: 0;
                visibility: hidden;
            }

            .devvn_toolbar ul li a:hover span {
                opacity: 1;
                visibility: visible;
            }

            .devvn_toolbar ul li a span:after {
                right: 100%;
                top: 50%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
                border-color: rgba(136, 183, 213, 0);
                border-right-color: #ffffff;
                border-width: 5px;
                margin-top: -5px;
            }

            .devvn_toolbar ul li a img {
                width: auto;
                height: auto;
                max-width: 29px;
                max-height: 29px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%, -50%, 0);
                -moz-transform: translate3d(-50%, -50%, 0);
                -webkit-transform: translate3d(-50%, -50%, 0);
            }
        }

        @media (max-width: 560px) {
            body.has_devvn_toolbar {
                padding-bottom: 50px;
            }

            .devvn_toolbar {
                background: #fff;
                display: inline-block;
                width: 100%;

                bottom: 0;
                left: 0;
                position: fixed;
                z-index: 99999999;
                height: auto;
                padding: 0;
                border-top: 0;

                visibility: hidden;
                opacity: 0;

                transform: translate3d(0, 120%, 0);
                -moz-transform: translate3d(0, 120%, 0);
                -webkit-transform: translate3d(0, 120%, 0);

                transition: all .3s linear;
                -moz-transition: all .3s linear;
                -webkit-transition: all .3s linear;
            }

            .show_contactfix .devvn_toolbar {
                transform: translate3d(0, 0, 0);
                -moz-transform: translate3d(0, 0, 0);
                -webkit-transform: translate3d(0, 0, 0);
                visibility: visible;
                opacity: 1;
            }


            .devvn_toolbar ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: table;
                border-collapse: collapse;
                table-layout: fixed;
                width: 100%;
            }

            .devvn_toolbar ul li {
                text-align: center;
                display: table-cell;
                vertical-align: top;
            }

            .devvn_toolbar ul li a {
                display: inline-block;
                width: 100%;
                outline: none;
                text-decoration: none;
                padding: 5px 3px;
            }

            .devvn_toolbar ul li a span {
                font-weight: 400;
                color: #ffffff;
                font-size: 3.5vw;
            }

            .devvn_toolbar ul li a img {
                height: 6vw;
                width: auto;
            }

            .woocommerce-checkout .devvn_toolbar {
                display: none !important;
            }
        }
    </style>
    <div class="devvn_toolbar">
        <ul>
            <style>
                .devvn_toolbar ul li a#devvn_contact_1 span:after {
                    border-right-color: #008000;
                }
            </style>
            <li>
                <a href="javascript:callme('tel:0936307069')" id="devvn_contact_1" title="Gọi điện"
                    style="background-color: #008000;">
                    <img width="41" height="41"
                        src="https://demo.devvn.com/plugins/wp-content/uploads/2019/11/icon-t1-white.png"
                        class="attachment-full size-full" alt=""><br>
                    <span style="color: #ffffff; background-color: #008000;">Gọi điện</span>
                </a>
            </li>
            <style>
                .devvn_toolbar ul li a#devvn_contact_2 span:after {
                    border-right-color: #e60808;
                }
            </style>
            <li>
                <a href="javascript:callme('sms:0936307069')" id="devvn_contact_2" title="Nhắn tin"
                    style="background-color: #e60808;">
                    <img width="56" height="48"
                        src="https://demo.devvn.com/plugins/wp-content/uploads/2019/11/icon-t2-white.png"
                        class="attachment-full size-full" alt=""><br>
                    <span style="color: #ffffff; background-color: #e60808;">Nhắn tin</span>
                </a>
            </li>
            <style>
                .devvn_toolbar ul li a#devvn_contact_3 span:after {
                    border-right-color: #008fe5;
                }
            </style>
            <li>
                <a href="javascript:callme('https://zalo.me/toanlevan')" id="devvn_contact_3" title="Chat zalo"
                    style="background-color: #008fe5;">
                    <img width="60" height="60" src="https://demo.devvn.com/plugins/wp-content/uploads/2019/12/zalo.png"
                        class="attachment-full size-full" alt=""><br>
                    <span style="color: #ffffff; background-color: #008fe5;">Chat zalo</span>
                </a>
            </li>
            <style>
                .devvn_toolbar ul li a#devvn_contact_4 span:after {
                    border-right-color: #3b5998;
                }
            </style>
            <li>
                <a href="javascript:callme('https://m.me/levantoan.wp')" id="devvn_contact_4" title="Facebook"
                    style="background-color: #3b5998;">
                    <img width="57" height="50"
                        src="https://demo.devvn.com/plugins/wp-content/uploads/2019/11/icon-t4-white.png"
                        class="attachment-full size-full" alt=""><br>
                    <span style="color: #ffffff; background-color: #3b5998;">Facebook</span>
                </a>
            </li>
        </ul>
    </div>
    

<script>
        function callme(url) {
            window.location = url;
        }
        (function ($) {
            $(document).ready(function () {
                function dcf_scroll_element() {
                    $top = jQuery(window).scrollTop();
                    if ($top >= 50 && !($('body').hasClass('show_contactfix'))) {
                        $('body').addClass('show_contactfix');
                    } else if ($top < 50 && $('body').hasClass('show_contactfix')) {
                        $('body').removeClass('show_contactfix');
                    }
                }
                dcf_scroll_element();
                $(window).scroll(function () {
                    dcf_scroll_element();
                });
            });
        })(jQuery);
    </script>