Question

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

HTML（使用font-awesome＆＃39; fa fa-home fa-2x＆＃39;作为图标）

<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;
                                };

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

1 个答案: