粘滯標題動畫

我們希望我們的標題在訪問者滾動時從頂部開始動畫。這我們目前的代碼：粘滯標題動畫

function stickMyHeader(){ 
var $window = $(window), 
    $menuButton = $('<a href="#">Show Menu</a>').addClass('menuHidden').attr('id', 'menuButtonHandle').css({display : 'none'}), 
    $headerAlias = $('<div id="header-alias" />').css({display : 'none'}), 
    $searchButton = $('<a href="#">Show Search</a>').addClass('searchHidden').attr('id', 'showSearchFormButton').css({display : 'none'}), 
    $headerOffset = $('#sitehead').offset(), 
    $headerHeight = $('#sitehead').outerHeight(), 
    $headerWidth = $('#sitehead').parent().width(); 

if($('#header-alias').length < 1) 
    $headerAlias.insertBefore($('#sitehead')); 

if($('#sitehead').find('#menuButtonHandle').length < 1) 
    $('#sitehead').append($menuButton); 

if($('#topSearchBox').find('#showSearchFormButton').length < 1) 
    $('#topSearchBox').append($searchButton); 

//reset 
if($window.width() > 768){ 
    $('#header-alias').css({display : 'none', height : $headerHeight+'px', margin : '0px', padding : '0px' }); 
    $('#sitehead').removeClass('headerOnScroll').css({position : 'relative', width : 'auto', left : '0', opacity : 1.0}); 
    $('#menuButtonHandle').removeClass('menuShowUp').addClass('menuHidden').hide(); 
    $('#showSearchFormButton').hide().removeClass('searchShowUp').addClass('searchHidden'); 
    $('#site-navigation').show(); 
} 

$('form#topSearch').unbind().show(); 
$('#menuButtonHandle').unbind(); 
$('#showSearchFormButton').unbind(); 

$window.on('scroll', function(){ 
    if(! jQuery.browser.mobile && $window.width() > 768){ 

     if($(window).scrollTop() > $headerHeight){ 

      $('#header-alias').css({display : 'block'}); 
      $('#sitehead').addClass('headerOnScroll').css({ 
       position : 'fixed', 
       display : 'block', 
       width : $headerWidth+'px', 
       top : '0', 
       left : $headerOffset.left+'px', 
       zIndex : '8' 
      }); 


      if(! jQuery.browser.mobile && $window.width() > 768){ 
       $('#sitehead').css({ opacity : 0.9 }); 
      } 

      if($window.width() < 768){ 
       $('#site-navigation').hide(); 
       $('#menuButtonHandle').show().removeClass('menuShowUp').addClass('menuHidden'); 
      } else { 
       $('#site-navigation').show(); 
       $('#menuButtonHandle').hide().removeClass('menuShowUp').addClass('menuHidden'); 
      } 

     } 
     else { 
      $('#header-alias').css({display : 'none'}); 
      $('#sitehead').removeClass('headerOnScroll').css({position : 'relative', width : 'auto', left : '0', opacity : 1.0}); 
      $('#site-navigation').stop(true,true).fadeIn(300); 

      $('#menuButtonHandle').hide().removeClass('menuShowUp').addClass('menuHidden'); 

     } 

    } 
}); 

if($window.width() < 768){ 
    var NavHeight = $('#site-navigation').outerHeight(); 

    $('#site-navigation').hide(); 
    $('form#topSearch').hide(); 
    $('#menuButtonHandle').show().removeClass('menuShowUp').addClass('menuHidden'); 
    $('#header-alias').css({display : 'block', height : '50px', margin : '0px', padding : '0px' }); 
    $('#sitehead').addClass('headerOnScroll').css({ 
     position : 'fixed', 
     display : 'block', 
     width : '100%', 
     top : '0', 
     left : '0', 
     zIndex : '8' 
    }); 
    $('#showSearchFormButton').removeClass('searchShowUp').addClass('searchHidden').css({display : 'block'}); 



} 

$('form#topSearch').on('submit', function(e){ 
    if($window.width() < 768){ 
     if($('form#topSearch').find('input[type="text"]').val() == ""){   
      $('#showSearchFormButton').click(); 
      return false; 
     } 
     else { 
      return true; 
     } 
    } 
}); 



if(! jQuery.browser.mobile){ 
    $('#sitehead').on('mouseover', function(){ 
     if($('#sitehead').hasClass('headerOnScroll') && $window.width() > 768){ 
      if(Modernizr.csstransforms && Modernizr.csstransitions){ 
       $('#sitehead').stop(true,true).transition({opacity : 1.0}, 500, 'easeOutSine'); 
      } else { 
       $('#sitehead').stop(true,true).animate({opacity : 1.0}, 500, 'easeOutSine'); 
      } 
     } 
    }); 
    $('#sitehead').on('mouseleave', function(){ 
     if($('#sitehead').hasClass('headerOnScroll') && $window.width() > 768){ 
      if(Modernizr.csstransforms && Modernizr.csstransitions){ 
       $('#sitehead').stop(true,true).transition({opacity : 0.9}, 500, 'easeOutSine'); 
      } else { 
       $('#sitehead').stop(true,true).animate({opacity : 0.9}, 500, 'easeOutSine'); 
      } 
     } 
    }); 
} 

$('#showSearchFormButton').on('click', function(e){ 
    e.preventDefault(); 

    if($window.width() < 768){ 
      if($('#showSearchFormButton').hasClass('searchHidden')){ 
       $('form#topSearch').stop(true,true).fadeIn(300); 
       $('form#topSearch').find('input[type="text"]').focus(); 

       $('#showSearchFormButton').removeClass('searchHidden').addClass('searchShowUp'); 
      } else { 
       $('form#topSearch').stop(true,true).fadeOut(300); 
       $('#showSearchFormButton').removeClass('searchShowUp').addClass('searchHidden'); 
      } 
    } 
}); 

$('#menuButtonHandle').on('click', function(e){ 
    e.preventDefault(); 
}); 

}

有沒有人有一個想法如何做到這一點？這個頁面的一個實例的鏈接是： Logo portfolio

任何幫助將不勝感激！

Thnx！

添

來源

2013-05-28 T Voskuilen

我用一些簡單的代碼來檢測，如果滾動已經改變，然後添加一個CSS類的頭..是這樣的：

$(window).scroll(function(){ 
    var top = $(this).scrollTop(); 
    if(top > 0){ 
     $('#topheader').addClass('sticky'); 
    }else{ 
     $('#topheader').removeClass('sticky'); 
    } 

});

然後你需要一些CSS是這樣的：

.sticky{ position: fixed; } 
#topheader { 
    width: 100%; 
    height: 75px; 
    border-bottom: 1px solid #ccc; 
    background-color: white; 
    position: absolute; 
    z-index: 99; 
    top: 0; 
}

希望這有助於:)

來源

2013-05-28 20:35:04 sirmdawg

粘滯標題動畫

回答

相關問題