Css sticky sidebar - Tạo Quảng Cáo trượt sidebar cho web cực dễ

    1. 0 VNĐ
    2. bấm xem số
    3. ID Tin rao:
      101526
    4. Tình trạng:
      Chưa có
    5. Khu vực:
      thành phố hồ chí minh , Chưa có
    6. Thông tin:
      5/7/21, 1,031 Đọc

  1. Css sticky sidebar hay tạo Quảng Cáo trượt sidebar cho web là thủ thuật được nhiều người sử dụng. Code Css sticky sidebar rất cần khi cần chèn quảng cáo trượt theo sidebar hay nội dung trượt giúp nâng cao hiệu quả tiếp cận người xem.

    Theo nghiên cứu mới đây của google. Thì quảng cáo trượt cố định dạng sticky giúp tăng doanh thu từ 10 đến 30 %. Nghe tuyệt vời quá nhỉ? Rồi! tôi xin đi thằng vào vấn đền.

    Css sticky sidebar trông như thế nào


    Đây là demo bằng hình ảnh để bạn hiểu thế nào là sticky sidebar , quảng cáo trượt khi cuộn trang. Nó giúp quảng cáo luôn trong tầm mắt người xem để nâng cao tỷ lệ click vào quảng cáo sticky được ghim.

    [​IMG]


    Cách làm quảng cáo cuộn trang


    Để làm quảng cáo cuộn trang đơn giản nhất tôi sẽ share cho bạn đoạn code chỉ vài dòng css và script áp dụng cho của web xenforo, wordpress hay trang html cơ bản. Đoạn code Css sticky sidebar đó như sau:

    HTML:
    <aside class="sticky">
    Nội dung ở đây
    </aside>
    <style>
    .sticky {
      position: relative;
      top: 0;
    }
    </style>
    <script>
    var stickySidebar = $('.sticky');
    
    if (stickySidebar.length > 0) {   
      var stickyHeight = stickySidebar.height(),
          sidebarTop = stickySidebar.offset().top;
    }
    
    // on scroll move the sidebar
    $(window).scroll(function () {
      if (stickySidebar.length > 0) {   
        var scrollTop = $(window).scrollTop();
                
        if (sidebarTop < scrollTop) {
          stickySidebar.css('top', scrollTop - sidebarTop);
    
          // stop the sticky sidebar at the footer to avoid overlapping
          var sidebarBottom = stickySidebar.offset().top + stickyHeight,
              stickyStop = $('.main-content').offset().top + $('.main-content').height();
          if (stickyStop < sidebarBottom) {
            var stopPosition = $('.main-content').height() - stickyHeight;
            stickySidebar.css('top', stopPosition);
          }
        }
        else {
          stickySidebar.css('top', '0');
        }
      }
    });
    
    $(window).resize(function () {
      if (stickySidebar.length > 0) {   
        stickyHeight = stickySidebar.height();
      }
    });
    </script>
    Bạn có thể chèn vào bất cứ đâu mà mình muốn. Và tất nhiên tốt nhất nên ở sidebar vì code này tôi dùng cho việc đó. Chú ý rằng :
    Thay Nội dung ở đây trong đoạn code trên bằng code quảng cáo của bạn hoặc banner quảng cáo, thậm chí nội dung bạn muốn Css sticky sidebar hoạt động.

    Đơn giản chỉ có vậy Chúc bạn thành công nhé.
     
    Admin

    Admin Chat với người này

    Admin website
    Quản trị viên Quản trị viên

    Tin:
    83 | Xem tất cả
    Được thích:
    5
    Điện thoại:
    số điện thoại
    Chia sẻ trang này
Đang tải...