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

truonghaovn

Thượng Đế
Tham gia
02/11/2015
Bài viết
111
Được Like
108
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

Thượng Đế
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

Thượng Đế
Tham gia
30/01/2017
Bài viết
641
Được Like
278
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

Thượng Đế
Tham gia
02/11/2015
Bài viết
111
Được Like
108
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

Thượng Đế
Tham gia
30/01/2017
Bài viết
641
Được Like
278
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

Thượng Đế
Tham gia
02/11/2015
Bài viết
111
Được Like
108
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

Thượng Đế
Tham gia
30/01/2017
Bài viết
641
Được Like
278
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

Thượng Đế
Tham gia
02/11/2015
Bài viết
111
Được Like
108
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

Thượng Đế
Tham gia
21/05/2015
Bài viết
23
Đượ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

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom