Question

我需要一些简单的代码示例来将徽标重新调整到某个尺寸，例如向下滚动放30px×30px，如果向上滚动或刷新页面将恢复原始尺寸，例如60px×60，其效果就像淡化它一样。

由于

Answer 1

我想你想要像 Demo

您可以使用jquery lik

来完成此操作

$(window).scroll(function(){ 
  if ($(this).scrollTop() > 10){  
   // x should be from where you want this to happen from top//
    //make CSS changes here

    $('.header').addClass("test");
      $('.logo').addClass("test");
  } 
  else{
    //back to default styles
    $('.header').removeClass("test");
      $('.logo').removeClass("test");
  }
});

HTML

<header class="header">
    <img class="logo" src="http://www.skrenta.com/images/stackoverflow.jpg" />
</header>

CSS

* { margin: 0; padding: 0; }

body {
  height: 2000px;
}

.header {
   width: 100%;
  height: 60px;
  background: red;
  position: relative;

  -webkit-transition: linear .3s;
     -moz-transition: linear .3s;
      -ms-transition: linear .3s;
       -o-transition: linear .3s;
          transition: linear .3s;
}

.logo {
    height:60px;    
    width:auto;
    position: relative;

}

.test {
  height: 30px;
  position: fixed;
}

Answer 2

以下是一个例子， FIDDLE

<header>
  <img src="http://precision-software.com/wp-content/uploads/2014/04/jQuery.gif" class="logo">
</header>

header {
  background: violet;
  position: fixed;
  width: 100%;
  height: 80px;
}
.logo {
  margin: 10px 20px;
  width: 60px;
  height: 60px;
}

(function($) {
  $(window).scroll(function() {
    if($(this).scrollTop() > 0) {
       $('header').stop().animate({ height: '50px' }, 400, 'linear');
       $('.logo').stop().animate({ width: '30px', height: '30px' }, 400, 'linear');
    }
    else { 
       $('header').stop().animate({ height: '80px' }, 400, 'linear');
       $('.logo').stop().animate({ width: '60px', height: '60px' }, 400, 'linear');
    }
  });
})(jQuery);

向下或向上滚动重新调整徽标大小 - jQuery

2 个答案: