Hướng dẫn thêm hộp thoại chạy dọc website khi cuộn nhanh chóng

Bạn có muốn website hay blog mình có một box hộp thoại thông báo hay đoạn giới thiệu gì đó chạy dọc website mỗi khi cuộn không. Trong bài hướng dẫn này công ty thiết kế web OSVN sẽ chỉ các bạn không phải là lập trình viên thiết kế keb cách làm sao để chèn một hộp thoại chạy dọc theo website một cách đơn giản và nhanh chóng nhất.

Một số câu hỏi có thể bạn quan tâm

Làm khó không: Dễ
Mất bao lâu: 5 phút
Sử dụng ngôn ngữ gì: HTML, CSS, Jquery
Cách làm như thế nào: Xem nhé

Chèn hộp thoại chạy dọc theo thanh cuộn website

Trong phần này vì là bài viết trên Blog nên mình sẽ hướng dẫn cách thực hiện trên blogspot, trên các CSM mã nguồn khác làm tương tự thôi
B1: Chèn đoạn Code CSS sau vào phần CSS của Blog (trong cặp thẻ <b:skin></b:skin>)
#thanh_cuon{

 margin-left: 0px;
 height: 180px;
 width: 330px;
 padding-top: 4px;
 padding-left: 3px;
 background-position: 0px 0px;
 background-repeat: no-repeat;
 background-image: url('icon.png');
 border: solid 1px #dfdfdf;
 border-radius: 10px;
 float:right;
 display: inline-block;
 background-color: #fff;
z-index:9999;// Cho box đè lên các vị trí khác khi cuộn

 box-shadow: 1px 1px 2px #000;// đổ bóng
 // Khi cuộn cách top 20px và thanh cuộn 125px
top: 20px;
right: 125px;
}

Bước 2: Chèn đoạn code jQuery sau vào trước thẻ đóng </head>
<script type='text/javascript'>
$(document).ready(function(){
    $(window).scroll(function() {
    if ($(window).scrollTop() &gt; 400) {
        $(&quot;#thanh_cuon&quot;).css(&quot;position&quot;, &quot;fixed&quot;);
        $(&quot;#thanh_cuon&quot;).css(&quot;background&quot;, &quot;#99FFCC&quot;);// Chuyển màu khi cuộn
    }
    else {// Thực hiện demo: Mai Anh Tai Website: www.ithietkeweb.net
        $(&quot;#thanh_cuon&quot;).css(&quot;position&quot;, &quot;static&quot;);
       $(&quot;#thanh_cuon&quot;).css(&quot;background&quot;, &quot;#FFF&quot;);// Cho màu về mặc định khi không cuộn
    }
});
});
</script>
Bước 3: Thêm đoạn nội dung vào vị trí hiển thị
<div id="thanh_cuon"></div>// Bắt buộc phải có nhé
Kết quả  sau khi thực hiện xong là đây:

Trên đây tôi đã hướng dẫn các bạn thêm hộp thoại chạy dọc website khi cuộn. Hãy thêm nó vào cho website của bạn để nó trở nên ấn tượng hơn nhé. Chúc các bạn thành công.
Nguồn: Cong ty thiet ke web OSVN