Tạo menu cố định khi cuộn trang

Hôm nay blog Thiết bị điện máy xin chia sẻ với các bạn cách tạo Menu cố định khi cuộn trang chỉ với vài dòng code rất đơn giản. Trước tiên các bạn hãy xem website blog của mình đã có thư viện jquery hay chưa. Nếu chưa có các bạn dán đường link bên dưới vào trước thẻ đóng </header> để sử dụng thư viện jquery.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script> 

Khi bạn đã dán link bên trên vào phần header của blog thì bạn đã có thư viện jquery của google rồi. Bây giờ mình tạo một đoạn code html đơn giản như bên dưới đây cho menu để bạn dể hình dung.

<nav id="nav" class="nav">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Học PHP</a></li>
        <li><a href="">SEO</a></li>
        <li><a href="">jQuery</a></li>
        <li><a href="">Wordpress</a></li>
        <li><a href="">Blogger</a></li>
    </ul>
</nav> 

Bây giờ bạn cho đoạn css này vào để cho menu thành hình, nếu là blogger thì bạn cho vào cặp thẻ <b:skin><![CDATA[/* Cho css vào đây ]]></b:skin> ngay chổ mấy chữ mình bôi màu đỏ ấy, còn nếu bạn đang sử dụng wordpress thì cho vào file style.css của theme, tuy nhiên trong bài này là đoạn html và css chỉ để làm mẫu thôi nên không được đẹp, nếu bạn muốn đẹp và mượt mà hơn thì bạn chỉnh lại css và thêm thắt gì đó cho đẹp hơn và hợp với blog của bạn. Xem demo tại Cáp điện dân dụng

.nav{ background: #000;height: 40px; line-height:40px }
.scrollq{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}
.nav ul { list-style: none; }
.nav ul li{float: left; padding: 0px 10px;}
.nav ul li a { color:#fff}

Để cho menu nằm cố định khi cuộn trang lên thì bạn cho tiếp đoạn code này vào, đoạn javascript này kết hợp với đoạn css mình bôi màu xanh ở trên chính là hiệu ứng fixed cho menu nằm cố định khi bạn cuộn trang. Con số 100 mà mình đã bôi màu xanh ở bên dưới chính là giá trị khoảng cách tính từ vị trí của menu đến top của blog, khi bạn cuộn trang qua vị trí này thì menu sẽ nhận class "scrollq" cố định cho menu của mình ở vị trí top theo class "scrollq"

<script type="text/javascript">

jQuery("document").ready(function($){

 var nav = $('.nav');

 $(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
   nav.addClass("scrollq");
  } else {
   nav.removeClass("scrollq");
  }
 });

});

</script>

Nếu bạn sử dụng blogger thì đến đây là bạn đã hoàn thành rồi, nhưng nếu bạn sử dụng wordpress thì bạn thêm code javascript này vào theme của website bằng cách sửa lại các class cho đúng với class trong theme của bạn và lưu lại với dạng file fixed.js rồi upload lên thư mục (folder) js trong theme của bạn. Tiếp theo thêm code php bên dưới vào file functions.php rồi lưu lại.

/** Add link script menu keep top**/
add_action('wp_enqueue_scripts','fixed_menu_top');
function fixed_menu_top () {
wp_enqueue_script( 'custom-script-menu', get_stylesheet_directory_uri() . '/fixed-menu.js',array( 'jquery' ) );
}

Đến đây là bạn đã hoàn thành và bạn Restart lại trình duyệt để xem kết quả.

Chúc bạn thực hiện thành công!

SHARE THIS