0

背景画像のスライドにはプラグイン「Maximage」を使用しており、折りたたみヘッダーには jQuery を使用しています。折りたたまれたヘッダーがスライダーと競合しているようです。

下にスクロールして、各スライドの後に何が起こるかを確認してください: http://maxsalakory.nl/demo/starink/

これは私のjsです:

    /* Collapsing header */
$(function(){
  $('header').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 50)
{
    if($('header').data('size') == 'big')
    {
        $('header').data('size','small');
        $('header').stop().animate({
            height:'50px'
        },150);
        $('.logo-img').stop().animate({
            height:'50px'
        },150);
        $('nav').stop().animate({
            'padding-top':'16px'
        },150);
        $('.logo-img').css('height', '50px');
        $('nav').css('height', '16px');
    }
}
else
  {
    if($('header').data('size') == 'small')
      {
        $('header').data('size','big');
        $('header').stop().animate({
            height:'80px'
        },150);
        $('.logo-img').stop().animate({
            height:'80px'
        },150);
        $('nav').stop().animate({
            'padding-top':'31px'
        },150);
        $('.logo-img').css('height', '80px');
        $('nav').css('height', '31px');
      }  
  }
});

/* Slider */
$(function(){
    $('#maximage').maximage({
        cycleOptions: {
            fx:'fade',
            random: 1,
            speed: 1000,
            timeout: 5000,
            prev: '#arrow_left',
            next: '#arrow_right'
        },
        onFirstImageLoaded: function(){
            jQuery('#cycle-loader').hide();
            jQuery('#maximage').fadeIn('fast');
        }
    });
});
4

0 に答える 0