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

[truonghaovn]

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):

<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

 

[phankt]

cái này hay này mà chưa có ai test cho em ý kiến

 

[tuna]

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):

<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]

Thấy code nó báo lỗi nhiều quá bác, ko chạy

này lâu quá rồi bạn giờ quên cách fix rồi

 

[tuna]

này lâu quá rồi bạn giờ quên cách fix rồi

vãi bác ))) thế bác có check được cách vnxf đang xài ko chỉ e với haha, tìm mãi ko ra cách

 

[truonghaovn]

vnxf thì bác thêm code này vào footer

<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]

vnxf thì bác thêm code này vào footer

<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

 

[truonghaovn]

bác thêm kiểu này thử:

<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]

bác thêm kiểu này thử:

<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]

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

bác test đi bây giờ mình test không được

 

[itseovn]

chèn vô lỗi tè le bạn ơi, tìm mọi cách mà nó không stick được !