div 在屏幕顶部增长，滚动后缩小

Question

我将网站上的右上角三角形按钮固定在右上角。当用户位于屏幕顶部时，我希望它的动画尺寸（从右上角）放大 125%，但在滚动时返回其常规尺寸。

HTML（使用 font-awesome 'fa fa-home fa-2x' 作为图标）

<a id="corner-tri" href="#" target="_blank">
    <div id="corner-tri-content">
        <span class="fa fa-home fa-2x"></span>
    </div>
</a>

CSS

#corner-tri {
  display: block;
  position: fixed;
  z-index: 99999;
  width: 65px; height: 65px;
  border-style: solid;
  border-width: 0 65px 65px 0; /* adjust for size of triangle */
  border-color: transparent #1ebeaf transparent transparent; /* adjust for color of triangle */
  top: 0; right: 0;
  color: #fff;
  -webkit-transition: border-color 0.3s ease;
  -moz-transition: border-color 0.3s ease;
  -ms-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}

#corner-tri:hover {
  border-color: transparent #2e2e2e transparent transparent;
}

#corner-tri-content{
  position: relative;
  top: 10px;
  right: -35px;
}

当用户滚动时，它是当前我希望的大小，不知道如何将其设置得更大（从右上角起 125%）

Answer 1

有几件事，第一，你需要你的过渡是为了“宽度”；然后，使用 JQuery（我假设你可以）来捕捉用户滚动的时间。 例如，

在你的css中，添加#corner-tri {transition: width 1s;}

在你的 javascript 中，添加类似这样的内容

    $("body").scroll(function(){
                           $("corner-tri").css("width",
                                               "[some small width]");
                           return false;
                                };