Cara Membuat Header Fix (tidak bergerak) ketika di scroll seperti di google plus, atau time line facebook

Cara untuk melakukan header tetap pada posisi atas ketika halaman web discroll salah satunya dengan menggunakan java script.

pertama buat code html sembarang, semisal :

<div id="header-fix">HEADER FIX</div>

kemudian dengan menambah code javascript :

var target = $('#header-fix');
var div_position = target.offset().top;

$(window).scroll(function() { 
    var y_position = $(window).scrollTop();
    if(y_position > div_position) {
        target.addClass('fixed');
    }
    else {
        target.removeClass('fixed');
    }
}

Keterangan dari code javascript :

1. Mengambil target dan mengambil posisinya

var target = $('#header-fix');
var div_position = target.offset().top;

1. Ketika event scroll (halaman web di scroll) $(window).scroll()maka akan menjalankan fungsi didalamnya

2. Isi fungsi didalamnya diantarannya

mengambil posisi dari posisi scroll atas dari halaman web, kemudian mencocokan dengan posisi dari target  $('#header-fix') jika posisi target lebih kecil maka dibuat fix (ditambah css position:fixed) jika tidak maka css tersebut dihilangkan.

 

Ya cukup sekian, Anda bisa memberi command jika terasa kurang paham.

Sumber Referensi

Advertisements

Loading penambahan data dengan menggunakan JSON, JQuery, dan PHP

sekedar berbagi: ada pertanyaan dari teman disini yang pengen mengupdate table data di browser apabila ada posting data yang disimpan di database. misalnya seorang admin blog akan melihat apabila ada user memposting topik baru di milist tanpa harus merefresh browsernya. saya tidak tahu apakah sudah ada atau belum postingnya disini. baiklah saya akan bagi tekniknya dengan menggunakan jquery (anda bisa download jquery.js dari www.jquery.com) dengan dataType dalam JSON (maaf bagi yang tidak berkenan yah, yah codingnya baru ala kadarnya dan masih acak2 an karena ini juga dibikinnya gak sungguhan).

asumsi tabel yang digunakan adalah tabel1 dengan kolom id1, pages dan word.

pertama-tama bikin dulu tampilan awal, saya bikin disini filenya notifikasi.php
<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

function notif(){

var last_id = 0;

if($(‘#notifikasi>tbody>tr’).length >= 1){

var num = $(‘#notifikasi>tbody>tr’).length – 1;

last_id = $(‘#notifikasi>tbody>tr:eq(‘+num+’)>td:eq(0)’).text();

};

/* script diatas untuk mendapatkan last_id yang sudah ditampilkan di browser jika row didalam tbody >= 1  sengaja saya tidak menyertakan last_id di variabel khusus kiriman dari server, kalau ada yang mau begitu ya silakan */

$.ajax({

url: ‘getdata.php’,

type: ‘POST’,

dataType: ‘json’,

data: ‘last_id=’+last_id,

success: function(msg){

if(msg.total > $(‘#notifikasi>tbody>tr’).length){

$(“.new”).addClass(“old”).removeClass(“new”);

$(“#notifikasi>tfoot>tr>td:eq(1)”).text(msg.total);

$.each(msg.rows,function(i,val){

$(‘#notifikasi>tbody’).append(‘<tr></tr>’);

$.each(val,function(j,v){

$(‘#notifikasi>tbody>tr’).last().append(“<td class=’new’>”+v+”</td>”);

})

})

}

/* jika json total dari server lebih > dari jumlah row di browser baru dijalankan updatenya */

}

});

}

$(document).ready(function(){

TimerId = setTimeout(“notif()”, 5000);

$(“#notifikasi”).ajaxStart(function(){clearTimeout(TimerId)}).ajaxStop(function(){TimerId = setTimeout(“notif()”, 5000)})

})

/* pas diawal load, kita jalankan setTimeout untuk mendapatkan data dengan ajax ( dalam 1 menit), untuk mencegah adanya penumpukan akses yang menyebabkan looping mysql_connect (jika yang posting data banyak bisa berabe, karena belum selesai PHP menjalankan request pertama sudah disusul dengan request berikutnya) maka pas ajax dijalankan, kita clear dulu TimerId nya, baru kalau sudah selesai ajax diload, kita set lagi TimerId nya */

</script>

<style>

.new {

background: #ccddee;

}

.old{

background: #eeddcc;

}

</style>

</head>

<body>

<table id=”notifikasi”>

<thead>

<tr>

<th>id</th>

<th>User</th>

<th>Notifikasi</th>

</tr>

</thead>

<tbody>

<?php

$handle = mysql_connect(“localhost”, “root”, “”);

mysql_select_db(“test”, $handle);

$query = mysql_query(“SELECT * FROM table1”);

$total = mysql_num_rows($query);

while($rows = mysql_fetch_assoc($query)){

echo “<tr class=’new’>”;

echo “<td>”. $rows[“id1”] . “</td>”;

echo “<td>”. $rows[“pages”] . “</td>”;

echo “<td>”. $rows[“word”] . “</td>”;

echo “</tr>”;

}

?>

</tbody>

<tfoot>

<tr><td>Total</td><td colspan=”2″><?php echo $total ?></td></tr>

</tfoot>

</table>

</body>

</html>

Yang kedua bikin file getdata.php untuk mensuplay datanya:

<?php

header(“Pragma: no-cache”);

header(“Cache-Control: no-store, no-cache, max-age=0, must-revalidate”);

header(‘Content-Type: text/x-json’);

$handle = mysql_connect(“localhost”, “root”, “”);

mysql_select_db(“test”);

if(isset($_POST[‘last_id’])){

$query = mysql_query(“SELECT * FROM table1”);

$numrows = mysql_num_rows($query);

mysql_free_result($query);

$query = mysql_query(“SELECT * FROM table1 WHERE id1 > “.$_POST[‘last_id’]);

$data = array();

$data1 = array();

$data2 = array();

while($rows = mysql_fetch_assoc($query)){

$data[] = $rows[‘id1’];

$data[] = $rows[‘pages’];

$data[] = $rows[‘word’];

$data1[] = $data;

unset($data);

}

$data2[‘total’] = $numrows;

$data2[‘rows’] = $data1;

echo json_encode($data2);

/* parsing array dalam bentuk JSON */

}

?>
sekian dulu yah, maaf kalau codingnya masih berantakan (hehehe silakan kalau mau ada yang merapikan lagi…:ngeles.com:). Sekedar info, script sudah diujicoba dan jalan.

(diambil dari group Facebook PHP Indonesia)