Hướng dẫn Sticky Widget Sidebar - cố định 1 Widget bất kỳ chạy theo sidebar

truonghaovn

Corporal
Tham gia
02/11/2015
Bài viết
115
Được Like
107
CHÀO ACE LÂU NGÀY MÌNH MỚI LOGIN ĐƯỢC NICK VÌ QUÊN PASS :)
Cái này mình share rồi nhưng ae không dùng được lâu lâu lại thấy pm mail mình hỏi.
Hôm nay mình sẽ share lại cho ae:
Đặc điểm:
Có thể chọn widget tuỳ ý (không trượt cả sidebar.)
Khoảng cách độ chính xác cao tính bằng hàm func không cần phải chập chiều cao từ chân đến đầu,...bla bla

HD sử dụng:

Để sử dụng ae thêm vào temple bất kì (trừ temple css):

Mã:
<script src="js/stick-widget-sidebar/sticky-widget.js" type="text/javascript"></script>
<script src="js/stick-widget-sidebar/jquery-scrolltofixed.js" type="text/javascript"></script>

ae open file sticky-widget.js để chỉnh sửa id widget mình đã quote hd
 

Đính kèm

  • truonghao.zip
    9.8 KB · Lượt xem: 49
Sửa lần cuối:

phankt

Corporal
Tham gia
23/08/2016
Bài viết
116
Được Like
25
cái này hay này mà chưa có ai test cho em ý kiến
 
  • Like
Reactions: THB

tuna

Sergeant
Tham gia
30/01/2017
Bài viết
639
Được Like
276
CHÀO ACE LÂU NGÀY MÌNH MỚI LOGIN ĐƯỢC NICK VÌ QUÊN PASS :)
Cái này mình share rồi nhưng ae không dùng được lâu lâu lại thấy pm mail mình hỏi.
Hôm nay mình sẽ share lại cho ae:
Đặc điểm:
Có thể chọn widget tuỳ ý (không trượt cả sidebar.)
Khoảng cách độ chính xác cao tính bằng hàm func không cần phải chập chiều cao từ chân đến đầu,...bla bla

HD sử dụng:

Để sử dụng ae thêm vào temple bất kì (trừ temple css):

Mã:
<script src="js/stick-widget-sidebar/sticky-widget.js" type="text/javascript"></script>
<script src="js/stick-widget-sidebar/jquery-scrolltofixed.js" type="text/javascript"></script>

ae open file sticky-widget.js để chỉnh sửa id widget mình đã quote hd
Thấy code nó báo lỗi nhiều quá bác, ko chạy :(
 

truonghaovn

Corporal
Tham gia
02/11/2015
Bài viết
115
Được Like
107
vnxf thì bác thêm code này vào footer

HTML:
<script type="text/javascript">
    var lht = window.location.href;
    //if(lht.indexOf('.t') != -1) {
    $(window).bind("scroll", function () {
        var banner = $(".rightside");
        var diemdau = $(".bnbreak").offset().top;
        var diemcuoi = $(".footer").offset().top - 140;
        var trang = $(".mainContainer");
        var cuoitrang = trang.offset().top + trang.height();
        var cuoibanner = banner.offset().top + banner.height();
        if ($(this).scrollTop() > diemdau && cuoibanner < cuoitrang) {
            if($(this).scrollTop() < diemcuoi - banner.height()) {
                banner.css({top: 55, position: 'fixed'});
            } else {
                banner.css({position: 'fixed', top: diemcuoi - $(this).scrollTop() - banner.height() - 18, width: 300});
            }
        } else {
            banner.css({position: 'static', top: ''});
        }
    }) 
    //} else $(".rightside").hide();
    </script>

Sau đó dùng <div class="rightside" >chèn nội dung muốn chạy vào đây</div>
 

tuna

Sergeant
Tham gia
30/01/2017
Bài viết
639
Được Like
276
vnxf thì bác thêm code này vào footer

HTML:
<script type="text/javascript">
    var lht = window.location.href;
    //if(lht.indexOf('.t') != -1) {
    $(window).bind("scroll", function () {
        var banner = $(".rightside");
        var diemdau = $(".bnbreak").offset().top;
        var diemcuoi = $(".footer").offset().top - 140;
        var trang = $(".mainContainer");
        var cuoitrang = trang.offset().top + trang.height();
        var cuoibanner = banner.offset().top + banner.height();
        if ($(this).scrollTop() > diemdau && cuoibanner < cuoitrang) {
            if($(this).scrollTop() < diemcuoi - banner.height()) {
                banner.css({top: 55, position: 'fixed'});
            } else {
                banner.css({position: 'fixed', top: diemcuoi - $(this).scrollTop() - banner.height() - 18, width: 300});
            }
        } else {
            banner.css({position: 'static', top: ''});
        }
    })
    //} else $(".rightside").hide();
    </script>

Sau đó dùng <div class="rightside" >chèn nội dung muốn chạy vào đây</div>
méo đc bác ạ =)) thiếu một số class như bnbreak mà ko biết thêm vào chỗ nào
 
Sửa lần cuối:

truonghaovn

Corporal
Tham gia
02/11/2015
Bài viết
115
Được Like
107
bác thêm kiểu này thử:
HTML:
<div class="bnbreak"></div>
<div class="rightside" >chèn nội dung muốn chạy vào đây</div>
<script type="text/javascript">
   var lht = window.location.href;
    //if(lht.indexOf('.t') != -1) {
    $(window).bind("scroll", function () {
        var banner = $(".rightside");
        var diemdau = $(".bnbreak").offset().top;
        var diemcuoi = $(".footer").offset().top - 140;
        var trang = $(".mainContainer");
        var cuoitrang = trang.offset().top + trang.height();
        var cuoibanner = banner.offset().top + banner.height();
        if ($(this).scrollTop() > diemdau && cuoibanner < cuoitrang) {
            if($(this).scrollTop() < diemcuoi - banner.height()) {
                banner.css({top: 55, position: 'fixed'});
            } else {
                banner.css({position: 'fixed', top: diemcuoi - $(this).scrollTop() - banner.height() - 18, width: 300});
            }
        } else {
            banner.css({position: 'static', top: ''});
        }
    })
    //} else $(".rightside").hide();
    </script>
 

tuna

Sergeant
Tham gia
30/01/2017
Bài viết
639
Được Like
276
bác thêm kiểu này thử:
HTML:
<div class="bnbreak"></div>
<div class="rightside" >chèn nội dung muốn chạy vào đây</div>
<script type="text/javascript">
   var lht = window.location.href;
    //if(lht.indexOf('.t') != -1) {
    $(window).bind("scroll", function () {
        var banner = $(".rightside");
        var diemdau = $(".bnbreak").offset().top;
        var diemcuoi = $(".footer").offset().top - 140;
        var trang = $(".mainContainer");
        var cuoitrang = trang.offset().top + trang.height();
        var cuoibanner = banner.offset().top + banner.height();
        if ($(this).scrollTop() > diemdau && cuoibanner < cuoitrang) {
            if($(this).scrollTop() < diemcuoi - banner.height()) {
                banner.css({top: 55, position: 'fixed'});
            } else {
                banner.css({position: 'fixed', top: diemcuoi - $(this).scrollTop() - banner.height() - 18, width: 300});
            }
        } else {
            banner.css({position: 'static', top: ''});
        }
    })
    //} else $(".rightside").hide();
    </script>
cái class .bnbreak hình như là để định vị trí tới khi nào thì banner nó ko trượt nữa thì phải, nên phải có trong code, chứ thêm kiểu này cũng ko đc
 

truonghaovn

Corporal
Tham gia
02/11/2015
Bài viết
115
Được Like
107
cái class .bnbreak hình như là để định vị trí tới khi nào thì banner nó ko trượt nữa thì phải, nên phải có trong code, chứ thêm kiểu này cũng ko đc
:D bác test đi bây giờ mình test không được
 

itseovn

Private
Tham gia
21/05/2015
Bài viết
24
Được Like
8
:| chèn vô lỗi tè le bạn ơi, tìm mọi cách mà nó không stick được !
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom