Cố định widget cuối bên sidebar khi scroll và tự động dừng tại chân trang

Hiện nay code về cố định sidebar widget khi scroll thanh cuộn được chia sẻ trên mạng nhiều lắm, không khó khăn khi tìm kiếm code. Tuy nhiên có một đặc điểm chung về code này thứ nhất là dài và thứ hai không tự dừng tại chân trang (footer) thay vào đó phải đặt độ cao tính từ chân trang lên tới chân widget. Như vậy hơi bất tiện vì khi footer thay đổi độ cao bắt buộc phải điều chỉnh lại độ cao trong code.

Thay vào đó các bạn viết đoạn code bằng jquery như thế này nó sẽ tối ưu hơn, các bước thực hiện như sau:

Giả sử mình kiểm tra HTML của giao diện hiển thị có dạng sau:

Copy

<div id="menu">⋯</div> // Thanh menu đầu trang

<div class="man-wrapper"> // Phần chính của trang

  <div class="main"> // Bố cục các bài đăng bên trái

    <div class="widget Blog" data-version="2" id="Blog1">⋯</div>

  </div>

  <div class="sidebar"> // Bố cục các widget bên phải

    <div class="widget PopularPosts" data-version="2" id="PopularPosts1">⋯</div> // widget

    <div class="widget HTML" data-version="2" id="HTML6">⋯</div> // widget

    <div class="widget HTML" data-version="2" id="HTML7">⋯</div> // widget cuối cần cố định

  </div>

</div>

<div id="footer">⋯</div> // Chân trang

Trong đó bạn cần biết được các phần tử sẽ lấy vào trong code, như đoạn html ở trên mình cần lấy các id sau:

• #menu: thanh menu
• #HTML6: widget nằm trên widget cần cố định
• #HTML7: widget cần cố định
• #footer: chân trang

Bây giờ mình sẽ viết script sử dụng jquery chèn trước </body>

Copy

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

<script>//<![CDATA[

var mq = window.matchMedia('(min-width: 1030px)'); // Kích thước màn hình tối thiểu script hoạt động

if (mq.matches) {

  function sticky_scroll() {

    var a = $('#HTML7').outerWidth(), // Tính độ rộng của widget cần cố định

      b = $('#HTML6').outerHeight(), // Tính độ cao của widget nằm trên

      c = a + 'px', // Đặt độ rộng bằng px của widget cần cố định

      d = $('#menu').outerHeight(), // Tính độ cao của thanh menu cố định nằm trên, nếu menu không cố định đặt d = 0

      e = $(window).scrollTop(),

      f = $("#footer").offset().top,

      g = $('#HTML6').offset().top + b,

      h = $("#HTML7").height(), // Độ cao của widget cần cố định

      i = 20; // Đặt độ cao tính từ footer tới chân widget quảng cáo để cố định 20 không cần thay đổi

    if (e + h > f - i) {

      $('#HTML7').css({

        top: (e + h - f + i) * -1

      })

    else if (e > g) {

      $('#HTML7').css('position', 'fixed').css('top', d).css('width', c)

    } else {

      $('#HTML7').css('position', '').css('top', '').css('width', '')

    }

  }

  $(function() {

    $(window).scroll(sticky_scroll)

    sticky_scroll()

  })

}

//]]></script>

Một điều lưu ý về kích thước màn hình, thông thường sidebar sẽ nằm bên phải khi kích thước màn hình nhỏ nhất là 768px (ipad). Nếu kích thước nhỏ hơn sidebar sẽ được đặt độ rộng 100% và nằm dưới phần main chính. Phần này tùy theo mỗi template thiết kế mà đặt window.matchMedia('(min-width: 1030px)') cho phù hợp.

Các bạn xem demo về code: https://vietbloggertheme.blogspot.com/2018/05/mark-ruffalo-ga-khong-lo-xanh-co-bi.html

Nội dung chính