[英]Sticky Header - Scroll - 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");
}
});
});
雖然,當前用戶只是在滾動時添加“粘性”類,而不是在原始標題消失時。
問候
用id="whateveryouwannacallit"
的div
包裹他
並設置:
#whateveryouwannacalltit{
position:fixed;
top:0;
left: 0;
width:100%;
}
實際上,你不需要包裝。 這是代碼
$(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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.