Share và sử dụng code sticky sidebar cho website - 123itvn.com


Cộng đồng vui bựa status Tham gia đê
(Góc Paypal)
Tỷ giá tốt, độ trust cao và nhận tiền nhanh chóng! Liên hệ ngay để được trải nghiệm dịch vụ mua dollar paypal - thanh toán hộ paypal uy tín nhất Việt Nam hàng trăm năm qua nhé :))

Share và sử dụng code sticky sidebar cho website


Với mỗi website, sticky sidebar luôn là một công cụ cần thiết để quảng bá những nội dung quan trọng. Bạn chưa có code sticky sidebar ? Bài viết này sẽ giúp bạn !


Share code và sử dụng sticky sidebar cho website
Thêm chú thích

Giới thiệu về tính năng sticky sidebar


Hiện nay cùng một "đối tượng dính " nhưng có khá nhiều thuật ngữ được sử dụng để gọi tên như sticky banner, sticky widget hay sticky sidebar ... Để tránh mâu thuẫn trong quá trình thao tác, mình sẽ gọi chung tất cả là sticky sidebar anh em nhé :)

Khi bạn kéo thanh cuộn của trình duyệt lên trên hoặc xuống dưới, sticky sidebar sẽ được cố định ở bên phải/trái màn hình theo những thông số của jquery (code sticky sidebar).

Mô hình sticky sidebar



Sticky sidebar nên được đặt ở vị trí cuối cùng trong các cột như hình dưới thì code mới hoạt động tốt và ổn đinh.
Một sidebar có thể chứa bên trong nhiều thành phần con như quảng cáo, video, bài viết mới nhất, ... nhưng chúng ta chỉ nên sử dụng tối đa 2 thành phần là ổn, vừa mang tính thẩm mỹ vừa dễ dàng trong việc quản lý code.

Vị trí sidebar trong website

Lưu ý chung


- Cùng một đoạn code nhưng không phải cứ paste vào là chạy bởi mỗi website được xây dựng trên một nền tảng và ngôn ngữ lập trình khác nhau. Do đó, hãy đảm bảo là bạn nắm vững về code để chỉnh sửa khi cần thiết.
- Mình sẽ tổng hợp và đưa ra nhiều cách cho anh em lựa chọn, nhớ sao lưu template trước khi thao tác nhé.
- Để tất cả javascript (jquery) trên website hoạt động ổn định trên, hãy paste đoạn mã sau vào trong cặp thẻ <body></body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Cách 1 : Sử dụng code sticky sidebar - phiên bản Q2W3


Bước 1 : Truy cập trang chỉnh sửa HTML.
Bước 2 : Tìm thẻ đóng </body> và chèn vào trước đó đoạn mã sau

<script type='text/javascript'>
//<![CDATA[
function q2w3_sidebar(e){function t(){}function f(t){var n=t.offset_top-t.fixed_margin_top;var s=i-e.margin_bottom;var o;if(e.width_inherit)o="inherit";else o=t.obj.css("width");var u=false;var a=false;var f=false;jQuery(window).on("scroll."+e.sidebar,function(e){var i=jQuery(this).scrollTop();if(i+t.fixed_margin_bottom>=s){if(!a){t.obj.css("position","fixed");t.obj.css("top","");t.obj.css("width",o);if(jQuery("#"+t.clone_id).length<=0)t.obj.before(t.clone);a=true;u=false;f=false}t.obj.css("bottom",i+r+t.next_widgets_height-s)}else if(i>=n){if(!u){t.obj.css("position","fixed");t.obj.css("top",t.fixed_margin_top);t.obj.css("bottom","");t.obj.css("width",o);if(jQuery("#"+t.clone_id).length<=0)t.obj.before(t.clone);u=true;a=false;f=false}}else{if(!f){t.obj.css("position","");t.obj.css("top","");t.obj.css("width","");if(jQuery("#"+t.clone_id).length>0)jQuery("#"+t.clone_id).remove();f=true;u=false;a=false}}}).trigger("scroll."+e.sidebar);jQuery(window).on("resize",function(){if(jQuery(window).width()<=e.screen_max_width){jQuery(window).off("load scroll."+e.sidebar);t.obj.css("position","");t.obj.css("top","");t.obj.css("width","");t.obj.css("margin","");t.obj.css("padding","");if(jQuery("#"+t.clone_id).length>0)jQuery("#"+t.clone_id).remove();f=true;u=false;a=false}}).trigger("resize")}if(!e.widgets)return false;if(e.widgets.length<1)return false;if(!e.sidebar)e.sidebar="q2w3-default-sidebar";var n=new Array;var r=jQuery(window).height();var i=jQuery(document).height();var s=e.margin_top;jQuery(".q2w3-widget-clone-"+e.sidebar).remove();for(var o=0;o<e.widgets.length;o++){widget_obj=jQuery("#"+e.widgets[o]);widget_obj.css("position","");if(widget_obj.attr("id")){n[o]=new t;n[o].obj=widget_obj;n[o].clone=widget_obj.clone();n[o].clone.children().remove();n[o].clone_id=widget_obj.attr("id")+"_clone";n[o].clone.addClass("q2w3-widget-clone-"+e.sidebar);n[o].clone.attr("id",n[o].clone_id);n[o].clone.css("height",widget_obj.height());n[o].clone.css("visibility","hidden");n[o].offset_top=widget_obj.offset().top;n[o].fixed_margin_top=s;n[o].height=widget_obj.outerHeight(true);n[o].fixed_margin_bottom=s+n[o].height;s+=n[o].height}else{n[o]=false}}var u=0;var a;for(var o=n.length-1;o>=0;o--){if(n[o]){n[o].next_widgets_height=u;n[o].fixed_margin_bottom+=u;u+=n[o].height;if(!a){a=widget_obj.parent();a.css("height","");a.height(a.height())}}}jQuery(window).off("load scroll."+e.sidebar);for(var o=0;o<n.length;o++){if(n[o])f(n[o])}}
jQuery(document).ready(function(){
            var q2w3_sidebar_1_options = {
                "sidebar" : "",
                "margin_top" : 50,
                "margin_bottom" : 300,
                "screen_max_width" : 0,
                "width_inherit" : false,
                "widgets" : ['id_sidebar']
            };
            q2w3_sidebar(q2w3_sidebar_1_options);
            setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); }, 1500);
        });
//]]>
</script>

Bước 3 : Lưu template và test.

Các tham số


1. margin_top : khoảng cách từ sticky sidebar tới cạnh trên màn hình (đơn vị : pixel).
2. margin_bottom : khoảng cách từ sticky sidebar tới cạnh dưới màn hình (đơn vị : pixel). Margin_bottom thường được tính bằng chiều cao của footer cộng thêm một khoảng cố định.

- Trường hợp 1 : footer có chiều cao luôn cố định, vậy thì đơn giản rồi, bạn chỉ cần ghi một giá trị cụ thể như ở đoạn code bên trên là xong.

"margin_bottom" : 300.

- Trường hợp 2 : footer có chiều cao thay đổi - thường là với giao diện responsive, lúc này chúng ta phải sử dụng biến cho margin-bottom

"margin_bottom" : $('.lớp_của_footer').height() + khoảng cách,
ví dụ : margin_bottom" : $('.footer').height() + 50,
Để lấy được lớp (class) của footer, bạn phải nắm được HTML hoặc nhấn F12 để xem mã nguồn nhé.

- sidebarwidgets : id của sticky sidebar.
Để an toàn, các bạn nên đặt sticky sidebar vào trong cặp thẻ <div></div> và thêm id cho cặp thẻ đó.

Ví dụ
<div id="stickya">
Code ...
</div>
Code tương ứng
"sidebar" : "stickya","widgets" : ['stickya']

Lưu ý


 Một đoạn code chỉ áp dung duy nhất cho một sidebar, nếu bạn muốn sử dụng nhiều hơn, hãy copy - paste và thay đổi các tham số cần thiết.

jQuery(document).ready(function(){
            var q2w3_sidebar_1_options = {
                "sidebar" : "stickya",
                "margin_top" : 5,
                "margin_bottom" : 300,
                "screen_max_width" : 0,
                "width_inherit" : false,
              "widgets" : ['stickya']
            };
            q2w3_sidebar(q2w3_sidebar_1_options);
            setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); }, 1500);
        });

Tham khảo : freetuts.net, Q2W3 WordPress Plugin 

Cách 2 : Sử dụng code sticky sidebar - phiên bản 123itvn


Đánh giá sơ lược
- Đoạn code này do chính team 123itvn thực hiện và đã đưa vào sử dụng. Nếu code không hoạt động, xin vui lòng sử dụng cách khác.
- Code chỉ hiệu quả cho website sử dụng 1 hoặc 2 sticky sidebar.
- Nếu có thể, bên mình sẽ tiếp tục cập nhật để code hoạt động tốt hơn trên nhiều thiết bị với nhiều kích cỡ màn hình khác nhau. Cám ơn đã ghé thăm :)

Bước 1 : Truy cập trang chỉnh sửa HTML.
Bước 2 : Tìm thẻ đóng </body> và chèn vào trước đó đoạn mã sau

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
console.log( "document ready!" );
//KHAI BÁO BIẾN
  var $stickyb = $('.stickyb');
  var $f = $('.footer');
  var b1 = $stickyb.offset().top;
  var kc = 5;
//KHI SCROLL
$(function(){
  $(window).scroll(function(){
var thanhcuon = $(window).scrollTop();
var mq = window.matchMedia("screen and (min-width: 768px)")
if (mq.matches)
    {
  // TH1 : khi thanh cuộn chưa đi qua vị trí top thằng B
  if (thanhcuon < b1 - kc )
{ $stickyb.css({ position: 'absolute', top:$stickyb.offset().top}); }      
// TH2 : khi đã đi qua thì cho dính luôn
else
{
$stickyb.css({ position: 'fixed', top:kc});
//Gặp footer, lúc này bỏ dính
  var h = $f.offset().top;
  if (thanhcuon > h - $stickyb.height() - kc)
{ $stickyb.css({ position: 'absolute', top: h - $stickyb.height() - kc - 7 }); }
}
    }
});
});
//KHI RESIZE CỬA SỔ TRÌNH DUYỆT
$(function(){
$(window).resize(function() {
var mq1 = window.matchMedia("screen and (min-width: 768px)")
// Nếu kích cỡ màn hình > 768px thì thiết lập vị trí đối tượng về trạng thái sticky
if (mq1.matches)
{$('.stickyb').css({ position: 'absolute', top:$('.stickyb').offset().top});}
// Nếu kích cỡ màn hình < 768px thì thiết lập vị trí đối tượng về mặc định
else {$('.stickyb').css({ position: 'inherit',top:''});}
});
});
});
//]]>
</script>

Bước 3 :  Lưu template và test.

Các tham số


- $stickyb, $f : lần lượt là tên lớp của 2 đối tượng sticky sidebar và footer.
- kc : khoảng cách từ đối tượng sticky sidebar tới cạnh trên màn hình (đơn vị : pixel).
- min-width: 768px : kích cỡ màn hình không muốn áp dụng sticky sidebar (với giao diện responsive). Ở đây, mình chỉ áp dụng sticky cho màn hình có bề ngang tối thiểu là 768px, còn từ 768 trở xuống thì tính năng sticky sẽ không còn hoạt động.

Lời kết


Nhìn chung, code sticky sidebar hoạt động tương đối ổn định ở điều kiện thường. Tuy nhiên, khi có sự điều chỉnh về kích cỡ trình duyệt (từ to sang bé, từ bé sang to) thì vị trí của sticky sidebar bắt đầu hơi "lệch lạc". Có nhiều nguyên nhân để dẫn tới điều này nhưng cơ bản nhất vẫn là do nền tảng và cách mà coder lập trình cho website. Nếu bạn không nắm vững về code, việc sử dụng sticky sidebar cũng không đơn giản đâu nhé.

Trong thời gian tới, mình sẽ tiếp tục tổng hợp và chia sẻ thêm các đoạn code sticky sidebar để anh em có nhiều lựa chọn hơn khi khai thác.


Từ khóa tìm kiếm :

  • xin code sticky sidebar jquery
  • tạo sticky sidebar trượt dọc website
  • share code floating sidebar
  • tạo đối tượng dính sticky trong wensite
  • tạo sticky sidebar với jquery
  • sử dụng code sticky sidebar như nào

Có thể bạn sẽ thích

Bình luận !