我正在創建一個標題，一旦滾動到一定數量的像素，它就會修復並保持在原位。
我可以只使用 css 和 html 來做到這一點還是我也需要 jquery？
我創建了一個演示，以便您可以理解。任何幫助都會很棒！
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;
}
我修改了 Coop 的答案。請檢查範例 FIDDLE 這是我的修改：
$(window).scroll(function(){ if ($(window).scrollTop() >= 330) { $('.sticky-header').addClass('fixed'); } else { $('.sticky-header').removeClass('fixed'); } });你需要一些 JS 來處理滾動事件。最好的方法是為固定位置設定一個新的 CSS 類，當滾動超過某個點時，該固定位置將分配給相關的 div。
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'); });小提琴範例：http://jsfiddle.net/gxRC9/501/
#編輯：擴充範例
#如果觸發點未知，但應該在黏性元素到達螢幕頂部時觸發，則可以使用
offset().top。var stickyOffset = $('.sticky').offset().top; $(window).scroll(function(){ var sticky = $('.sticky'), scroll = $(window).scrollTop(); if (scroll >= stickyOffset) sticky.addClass('fixed'); else sticky.removeClass('fixed'); });擴充範例小提琴：http://jsfiddle.net/gxRC9/502/
#