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;
}

P粉517090748 · Answer

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');
   }
});

P粉244155277 · Answer

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

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/