Tiêu đề bài viết chạy theo thanh cuộn - giống Haivl.com

Bạn Hiếu Nguyễn Văn có đưa ra ý tưởng làm cách nào để tiêu đề bài viết chạy theo thanh cuộn giống như Haivl.com và ở bài viết này mình sẽ hướng dẫn thực hiện thủ thuật này

Lưu ý

• Trước khi thực hiện thủ thuật bạn nên lưu lại template để đề phòng

Cài đặt trong template

Bước 1: Dán code bên dưới trước thẻ </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
 #trollvltitleFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
 #trollvltitleFloat td{padding:4px;margin:0;border:none;}
 #trollvltitleFloat td iframe{max-width:82px;width:82px !important;}
 #trollvltitleFloat.trollvlFloatTitle{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;
jQuery(document).ready(function(b){var a=b("#trollvltitleFloat");a.wrap('<div id="trollvlTitlelPlaceholder"></div>').closest("#trollvlTitlelPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#trollvltitleFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("trollvlFloatTitle"):a.removeClass("trollvlFloatTitle");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
</b:if>

• Xóa dòng màu đỏ đi nếu trong template của bạn đã có jQuery rồi tránh xung đột code
• Thay đổi  #FFFFFF nếu muốn màu nền chứa tiêu đề thành màu khác
• Đoạn code màu xanh là bóng và khung của tiêu đề bạn có thể tùy chỉnh theo ý mình

Bước 2: Xác định phần chứa tiêu đề trong template
Ví dụ khi sử dụng trình duyệt Chrome ta làm như sau:

• Nhấn chuột phải vào phần tiêu đề sau đó chọn Kiểm tra phần tử
• Hiện ra khung bên dưới ta sẽ biết được đâu là phần tiêu đề trong template

• Như hình trên ta sẽ thấy được class của Tiêu đề là post-title entry-title.
• Dựa vào đoạn vừa tìm được ta vào trong template để xác định toàn bộ code chứa tiêu đề bài viết ta sẽ được đoạn tương tự:

<h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>

• Tại sao mình lại nói là tương tự? Bởi vì mỗi cấu trúc của template có thể khác nhau một chút. Và ta gọi đoạn code chứa tiêu đề bài viết bên trên là A

Bước 3: Thêm thuộc tính chạy dọc theo bài viết cho tiêu đề
Dán đoạn code bên dưới vào trước sau đoạn code chứa tiêu đề A (thường là chèn vào đoạn code A thứ 2 trong template) bên trên và lưu lại template

<div id="trollvltitleFloat" class="trollvltitleFloat">
<table  width="100%" class="trollvltitleFloat">
 <tr>
  <td>
A</td>
 </tr>
</table>
</div>

Chúc bạn thành công! Đừng quên like và share bài viết nếu thấy hay nhé! Cảm ơn