捲動：如何修復標題

Question

我正在創建一個標題，一旦滾動到一定數量的像素，它就會修復並保持在原位。

我可以只使用 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;
}

#

Answer 1

我修改了 Coop 的答案。請檢查範例 FIDDLE 這是我的修改：

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

Answer 2

你需要一些 JS 來處理滾動事件。最好的方法是為固定位置設定一個新的 CSS 類，當滾動超過某個點時，該固定位置將分配給相關的 div。

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

小提琴範例：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/

#