Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 81
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    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.

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

                    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
                      Bài đăng mới hơn Bài đăng cũ hơn