Menatal: Cara Membetulkan Tajuk

Question

Saya sedang mencipta pengepala yang akan membetulkan dan kekal di tempatnya setelah menatal ke bilangan piksel tertentu.

Bolehkah saya melakukan ini hanya menggunakan css dan html atau adakah saya memerlukan jquery juga?

Saya buat demo supaya anda boleh faham. Sebarang bantuan akan menjadi hebat!

http://jsfiddle.net/gxRC9/4/

body{
     margin:0px;
     padding:0px;
}
 .clear{
     clear:both;
}
 .container{
     height:2000px;
}
 .cover-photo-container{
     width:700px;
     height: 348px;
     margin-bottom: 20px;
     background-color:red;
}
 .small-box{
     width:163px;
     height:100px;
     border:1px solid blue;
     float:left;
}
 .sticky-header{
     width:700px;
     height:50px;
     background:orange;
     postion:fixed;
}

Answer 1

Saya mengubah suai jawapan Coop. Sila semak contoh FIDDLE Berikut ialah pengubahsuaian saya:

$(window).scroll(function(){
  if ($(window).scrollTop() >= 330) {
    $('.sticky-header').addClass('fixed');
   }
   else {
    $('.sticky-header').removeClass('fixed');
   }
});

Answer 2

Anda memerlukan beberapa JS untuk mengendalikan acara skrol. Cara terbaik ialah menetapkan kelas CSS baharu untuk kedudukan tetap yang akan diberikan kepada div yang berkaitan apabila menatal melepasi titik tertentu.

HTML

<div class="sticky"></div>

CSS

.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%; }

jQuery

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

Contoh biola: http://jsfiddle.net/gxRC9/501/

---

EDIT: Contoh lanjutan

Anda boleh menggunakan offset().top jika titik pencetus tidak diketahui tetapi harus mencetuskan apabila elemen melekit mencapai bahagian atas skrin.

var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

Contoh biola lanjutan: http://jsfiddle.net/gxRC9/502/