Tạo các nút liên hệ và chỉ hiển thị khi scroll đến vị trí xác định

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/AVvXsEhDqCJf3JCwlcDUPlUti11JU1gKMGIlF_PPZHhpo05V3_2FvItEamvwWgwrk_MTchvkkscCkqEUlK9vuIzNjyvK_rBj9jX04Gf7kt1L7E9fHPQERh4sdpbttAFjWBqmZlgqADRPpt-C7oI/s1600/call.png)}

.echbay-sms-messenger div.phonering-alo-sms{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMmURzrVkxKNK4LYOdnw8UJ6_maJ2vjhR44tJIX1Ric1-FMK6v03DO6IlyelxtEXBEgj0WL3gqx0nqg1u483pSXc4g-IvrikEHd9Rlnwm1zJ1Qwi1RdaA_xE-NJykYLApjqJTqzI669-0/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/AVvXsEjnEuf0BoZN880daTPFN4byNaawV3buAkSktulNH_6x5pDn5_Z5m4RHzR0WgDZJTDbUPjV4uSOI-PnPU099AtrT_D1OIHHCWU6dvCktakPbkkZjFB_MNhOqGfnFWd6bgowv9dmALROEez0/s1600/messenger.png);background-color:#0084FF}

.echbay-sms-messenger div.phonering-alo-zalo{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihZdu-xlmrFZv9hyBiePsWo2gasRbmzFWhVx-iMsPl5anL6W11Mi4aHatSk2lyL3q_Tcxiq_5f21z9pM9QagVz_tcAzG0-2I4dmpN8iO_qIZZH-DjSHSAviiygEOdt76ERQe9Gb_Sznm0/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

Tạo các nút liên hệ và chỉ hiển thị khi scroll đến vị trí xác định

Tạo các nút liên hệ và chỉ hiển thị khi scroll đến vị trí xác định

Liên quanXem thêm