Nút liên hệ là một trong những yếu tố bắt buộc phải có với những Blog có chủ đề về dịch vụ, bán hàng, tuy nhiên chúng thường nằm ở một vị trí cố định và thường chiếm diện tích gây mất thẩm mỹ và vì lý do đó chúng ta sẽ làm ẩn nó đi và chỉ cho hiển thị khi đã scroll chuột đến một vị trí xác định.
Cách thực hiện gồm 3 bước sau:
1. Code Css
Phần style cho các nút liên hệ mình sẽ đặt cố định ở giữa bên phải trang web bao gồm 4 nút theo thứ tự: gọi điện, nhắn tin, chát facebook và chat zalo
.echbay-sms-messenger{position:fixed;top:50%;right:0;transform:translate(-0,-50%);z-index:999!important;display:none}
.echbay-sms-messenger div{width:45px;margin:7px 0;background:#0084FF center no-repeat;background-size:70%;border-radius:50%}
.echbay-sms-messenger div:first-child{margin-top:0}
.echbay-sms-messenger div:last-child{margin-bottom:0}
.echbay-sms-messenger a{display:block;line-height:45px}
.echbay-sms-messenger div.phonering-alo-alo{background-color:#0080c0}
.echbay-sms-messenger div.phonering-alo-zalo{background-color:#008df2}
.echbay-sms-messenger div.phonering-alo-alo{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbqhZeZ8dTbJmCNN7f6n25QH9lokTG_sqYmOgW7HdK_I6lUBL6PyOFQ2hDjt1tRU8Vou-dw7jmdi1XplDeHcZKcL8gpg173yQsJd0DHPKbxo4QxZnHScucIJkIFk5zb5A8adrss-OQak/s1600/call.png)}
.echbay-sms-messenger div.phonering-alo-sms{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNDIgpFXXEzwfdTJjPNjGJJYKNjhVHuwTJWLe3oHglogriu0xaqgaEeDWWdXHFB05Rbmrks_xnYX0mruryUvJ3mCHVHHf_tsd8VbGfxai9kRmechLDIhSHu2UU6cE1HIg4AHGUu7W18s/s1600/mail.png);background-color:#00a651;background-size:60%}
.echbay-sms-messenger div.phonering-alo-messenger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2PDeySups5g2WpQzeWWMNue0xvgPairNrUIG376gzOLlyfzrKhZq_RALklNvgZDspemCkxN6CkLVhqgTpTY1jZRhaSsMjJAd4sOMnmVf2zH1q6qHSBv-fzX1xB_o7nBgnUNDIPyL6Uf0/s1600/messenger.png);background-color:#0084FF}
.echbay-sms-messenger div.phonering-alo-zalo{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOcQk_EmxoljopyLP7ZRJgRzbo7ZBboA6rbhbGbrF2PUofNoc2WDPCF0fbZFyvd4NFBuESc1J-q63-ocNmUy55SMHK1G_gO1xy1pbUxYFQJJAHluP0qGyNq72BVWJxjiUgOdyMxnqswGM/s1600/zalo.png)}
2. Code Html
Đặt code sau ở bất kỳ vị trí nào trong cặp thẻ <body></body> có thể ngay dưới <body> hoặc trước </body> đều được nhưng đảm bảo code phải hiển thị ở tất cả trang
<div class='echbay-sms-messenger'>
<div class='phonering-alo-alo'>
<a href='tel:+84123456789' rel='nofollow' title='Yêu cầu gọi lại'>.</a>
</div>
<div class='phonering-alo-sms'>
<a href='sms:+84123456789' rel='nofollow' title='Gửi tin nhắn'>.</a>
</div>
<div class='phonering-alo-zalo'>
<a href='https://zalo.me/+84123456789' rel='noppener nofollow' target='_blank' title='Zalo Chat'>.</a>
</div>
<div class='phonering-alo-messenger'>
<a href='https://www.messenger.com/t/kequaduongvodanh' rel='noppener nofollow' target='_blank' title='Messenger Chat'>.</a>
</div>
</div>
Các bạn thay lại số điện thoại và link chat
3. Code Jquery
Phần này các bạn cần xác định phần tử class hoặc id để khi scroll đến phần tử đó sẽ hiển thị các nút liên hệ, code jquery các bạn đặt trước thẻ đóng </body>
<script>//<![CDATA[
$(document).on('scroll', function() {
var x = $(this).scrollTop(),
y = $('#template').offset().top
if (x > y) {
$('.echbay-sms-messenger').fadeIn()
} else {
$('.echbay-sms-messenger').fadeOut()
}
})
//]]></script>
Trong đó #template là id của phần tử cần hiển thị nút liên hệ khi scroll chuột đến vị trí này
Thank admin đã share.
Trả lờiXóaThay vì gắn ID (vì trang nào cũng cần 1 ID trên thì bất tiện), thì viết như này sẽ tiện hơn
$(window).scroll(function() {
$(this).scrollTop() > 200 ? $('.echbay-sms-messenger').fadeIn() : $('.echbay-sms-messenger').fadeOut()
})