0

当访问者滚动时，我们希望我们的标题从顶部动画。这是我们当前的代码：

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

}

有谁知道如何做到这一点？此页面的实时示例的链接是： 徽标组合

任何帮助都感激不尽！

谢谢！

蒂姆

4

1 回答 1

0

我使用了一些简单的代码来检测滚动是否已更改，然后在标题中添加一个 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-28T20:35:04.107 回答