Question

为这个暧昧的头衔道歉，想不出任何更具描述性的东西。所以基本上我有一个客户端需要页面中间的标题，在该标题上以及导航是一个重叠顶部和底部的图像（吉他选择标识）。他们还想要一个允许它旋转的CSS3过渡。他们还希望标题在到达顶部时是粘性的，以及重叠的标识，以缩小尺寸以适应条形并且不重叠，从而切断顶部。

我已经完成所有工作，并且可以在这个小提琴中看到粗略的版本 - http://jsfiddle.net/8puCE/6/

现在我的问题是，在Chrome和IE10中，当拾取器从小返回到原始大小时，用于旋转的过渡效果也被使用，导致Chrome中不必要的延迟以及容器盒的影响缓慢在IE中变大。由于某种原因，FF也没有这样做，直接跳转到小/大而没有转换。如果可能的话，这就是我想要的所有浏览器。

从我能说的问题是因为.front和.back对它们进行了转换，它也明显适用于大小转换，这是我不想要的。

以下是我正在使用的代码，用于粘贴条形图并将徽标调整为较小的尺寸：

var NavTop = $('#navbar').offset().top;

$(window).scroll(function(){
  if( $(window).scrollTop() > NavTop ) {
    $('#navbar').css({position: 'fixed', top: '0px'});
    $('#mainwrap').css({padding: '65px 0 0 0'});
    $('.flip-container').css({top: '2px' , height: '64px', width: '58px'});
    $('.front').css({background: 'url(images/logoc.png) no-repeat' , height: '64px', width: '58px'});
    $('.back').css({background: 'url(images/logoc.png) no-repeat' , height: '64px', width: '58px'});
  } else {
    $('#navbar').css({position: 'relative'});
    $('#mainwrap').css({padding: '0 20px'});
    $('.flip-container').css({display: 'inline', top: '-30px' , height: '138px', width: '121px'});
    $('.front').css({background: 'url(images/logoa.png) no-repeat' , height: '138px', width: '121px'});
    $('.back').css({background: 'url(images/logob.png) no-repeat' , height: '138px', width: '121px'});
  }
});

我在jsfiddle中使用photobucket图像，但那些是我的真实图像。 logoa是大的前面，logob是大的后面。 logoc是小型的前面，当前也是后面的，但是后面将是最终的logod。

Answer 1

我强烈怀疑你可以在不使用单行JavaScript的情况下表达所有这些动画（除了视口位置检测以设置/删除固定模式）。所有那些JavaScript风格的修改都可能会搞乱动画定时器。

您的JavaScript代码应如下所示：

 $(window).scroll(function(){
   if( $(window).scrollTop() > NavTop ) {
     NavTop.addClass("fixed"); // or maybe $(document.body)? you don't seem to
                               // have a container element for both the header
                               // and the main content
   } else {
     NavTop.removeClass("fixed");
   }
});

更改尺寸时对粘性标题图像的不需要的过渡效果

1 个答案: