Question

我使用jquery为www.brunodejonghe.be创建了一个弹出页脚效果。

适用于FF，Safari，IE7 +和Opera。当我在Google Chrome中打开页脚时，会在页脚下方添加空格。

有人知道我能做些什么吗？

提前感谢！

JQuery脚本：

$('#contact').click(function() {
   <!-- show panel -->
   $("#contactpanel").slideToggle(1500);

   if ($activated == 1) {   
      $('#contact').html("<h4>Contacteer me</h4>");
      $('#contactpanel').css('height', $('#contactpanel').height() + 'px');
      $activated = 0;
   }
   else {
      $('#contact').html("<h4>Verberg</h4>");
      // fluid toggle
      $('#contactpanel').css('height', $('#contactpanel').height() + 'px');
      // scroll to bottom page for pop up footer effect 

      // detect opera and fix scroll bug 
      if ($.browser.opera == true)
      {
         $('html').animate({
            scrollTop:  $(document).height() -  $('#contactpanel').height() + 'px'
           }, 1500);
         $activated = 1;
      }
      else {
         $('html, body').animate({
            scrollTop: $(document).height() -  $('#contactpanel').height() + 'px'
         }, 1500);
         $activated = 1;
      }
   }
});

Answer 1

将overflow:hidden;放到footer div上，并从height:75px;和#footer中移除#footer, .push解决了我的问题。

那就是说，我完全建议不同的解决方案。我没有通过JavaScript动画转换，而是建议创建一个简单的过渡。以下（未经测试的）代码：

CSS：

#contactpanel {
  overflow: hidden;
  max-height: 0px;
  -webkit-transition: max-height 1s ease;
  -moz-transition: max-height 1s ease;
  ... /* and so on... */
}
#contactpanel.visible {
  max-height: 300px; /* Or so... */
}

JavaScript的：

var contact = document.getElementById('contact');
var panel = document.getElementById('contactpanel');
contact.addEventListener('click', function(e) {
  panel.classList.toggle('visible');
});

看看http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/，了解过渡如何运作，以及它们如何让您的生活变得更简单。：）

在JQuery slideToggle之后，Chrome会在页面底部添加空格

1 个答案: