Question

在向下滚动页面时，我使用以下代码更改徽标的大小。

＆＃13;

$(document).on('scroll', function() {
  if ($(document).scrollTop() >= 10) {
    $('.logo img').css('width', '50px');
  } else {
    $('.logo img').css('width', '');
  }
});

＆＃13;

.nav {
  position: fixed top: 0;
  z-index: 1;
  width: 100%;
}

.nav .logo {
  position: fixed;
  text-align: left;
  z-index: 2;
  top: 0;
  overflow: hidden;
  opacity: .5;
}

.container {
  padding-top: 120px;
  height: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <div class="logo">
    <a href="index.html"><img src="http://placehold.it/100x100" alt="" /></a>
  </div>
</div>
<div class="container">
  Lorem ipsum
</div>

＆＃13;

我希望从大到小顺利过渡。

https://jsfiddle.net/sL89qxcx/

我可以添加一些内容来实现平滑过渡吗？

Answer 1

实现这一目标的最佳方法是使用CSS转换，因为它们是硬件加速的，并且还可以更好地分离关注点。然后，您可以通过在JS中添加/删除类来切换动画。

重要的是将width和transition规则添加到.logo img元素的默认状态。然后，您可以在添加的类中修改width。试试这个：

＆＃13;

$(document).on('scroll', function() {
  $('.logo img').toggleClass('small', $(document).scrollTop() >= 10);
});

＆＃13;

.nav {
  position: fixed top: 0;
  z-index: 1;
  width: 100%;
}

.nav .logo {
  position: fixed;
  text-align: left;
  z-index: 2;
  top: 0;
  overflow: hidden;
  opacity: .5;
}

.nav .logo img {
  width: 100px;
  transition: width 0.3s;
}

.nav .logo img.small {
  width: 50px;
}

.container {
  padding-top: 120px;
  height: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <div class="logo">
    <a href="index.html"><img src="http://placehold.it/100x100" alt="" /></a>
  </div>
</div>
<div class="container">
  Lorem ipsum
</div>

＆＃13;

Answer 2

一些指示：

避免使用.css()作为一般规则来设置样式（当然，例外情况适用）。相反，考虑在CSS中定义一个类，例如。 .small-logo {width:8%}，并改为使用.addClass()。

这具有方便的副作用，如果已经添加了类，则不会再次添加。

反过来，这可以让您在徽标的样式上设置transition: width 0.4 ease-in-out;或类似内容。这将提供您所要求的平稳过渡。

CSS很有趣！

滚动时调整徽标大小

2 个答案: