粘性標題 - 滾動 - CSS/jQuery

我希望創建一個粘性標題。。每當用戶向下滾動和原始標題消失，那麼「粘」頭應該踢在粘性標題 - 滾動 - CSS/jQuery

我目前使用的：

$(function(){ 
    // Check the initial Poistion of the Sticky Header 
    var stickyHeaderTop = $('#sticky').offset().top; 
    $(window).scroll(function(){ 
     if($(window).scrollTop() > stickyHeaderTop) { 
      //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'}); 
      $('#sticky').addClass("sticky"); 
     } else { 
      $('#sticky').removeClass("sticky"); 
     } 
    }); 
});

雖然，當前的添加類「粘」每當用戶進行滾動時，而不是原始標題應該消失時。

問候

來源

2011-11-21 oliverbj

這工作得很好：http://jsfiddle.net/purmou/ZQwhL/embedded/result – Purag

但我原來的報頭位於在頂部開始。 – oliverbj

如果它位於頂部，那麼爲什麼用戶必須滾動才能使其變得粘滯？只需將其設置爲'position：fixed;'即可開始：http://jsfiddle.net/purmou/ZQwhL/1/embedded/result,html,css/ – Purag

把他裹好了div與id="whateveryouwannacallit"

，並設置：

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

來源

2012-01-14 16:37:30 Erick

其實，你不需要包裝。下面是代碼

$(document).ready(function() { 
    var stuck = $('#header'); 
    var start = $(div).offset().top; 
    $.event.add(window, "scroll", function() { 
    var p = $(window).scrollTop(); 
    $(stuck).css('position',((p)>start) ? 'fixed' : 'static'); 
    $(stuck).css('top',((p)>start) ? '0px' : ''); 
    }); 
});

幸得此頁：http://viralpatel.net/blogs/scroll-fix-header-jquery-facebook/

來源

2013-01-20 20:40:09

粘性標題 - 滾動 - CSS/jQuery

回答

相關問題