Javascript 你能在使用CSS3滚动时修复一个div并使其改变不透明度、大小和位置吗

我甚至不知道如何搜索这个问题。但实际上，我试图弄清楚这个网站是如何在他们的表格上实现这种固定的不透明度/大小变化效果的：。如果你向下滚动，你会看到桌子上的效果。当您将鼠标悬停在它上面时，它会弹出，使数据更加可见

我唯一能想到的是使用一个固定的div，当滚动超过某个点时，它会触发一个jqueryui事件，该事件会在降低不透明度的同时收缩，然后是一个悬停事件，该事件会逆转这种效果

以我上面描述的方式实现这个动画似乎效率低下，我不确定是否可以用CSS3完成更多或全部工作。因此，基本上您可以完全或几乎完全实现CSS3中提供的页面上显示的效果

我还查看了页面的源代码，无法从css和脚本中找到它

这是我到目前为止所拥有的一把小提琴。尚未开始滚动：

HTML

JavaScript

仅伪代码：

窗口功能{

if window.>selectedElement..top{

选择元素{ 变换：比例为0.75， 不透明度：.5 位置：固定 })

}否则{

选择element.animate{ 变换：比例为0.75， 不透明度：1 位置：静态 })

}

})

---

he伪代码中提供的链接应该为您指明了正确的方向。

通过CSS3转换和一点Javascript/jQuery，您可以轻松做到这一点：

演示小提琴：

相关CSS：

相关jQuery代码：

希望有帮助

---

.

到目前为止，您编写了哪些代码？发布Fiddle我正在试图弄清楚这个网站是如何实现x的，然后链接到该网站不是一个正确的问题陈述……注意：jQuery的动画库性能很差。您最好使用过渡和setTimeout或其他动画libary@ZachSaucier就个人而言，我会使用css转换，但不确定为什么需要设置超时。。。我试着保持简单。教一个人钓鱼等等。设置超时的原因是，因为很多滚动事件都会触发，所以它不会尝试堆叠转换。这很好，我不知道这些属性。我想看看是否有一种不用JavaScript就能实现滚动效果的方法。视差效果可以在不添加JavaScript事件处理程序的情况下实现，但不确定这种效果

<div id="stuff">Blahblah</div>

div {
    width:250px;
    height:250px;
    border:2px solid #a1a1a1;
}

$( "#stuff" ).click(function() {
  $( "#stuff" ).animate({
    width: "20%",
      height:"20px",
    opacity: 0.4
  }, 1500 );
});

#hanger {
    width: 200px; height: 200px;
    background-color: #00f;
    position: fixed;        /* Position fixed important */
    top: 10px; right: 10px;
    opacity: 1;
    transition: 0.5s all;   /* Animate transitions */
}

#hanger.dim {               /* Style to make it appear dimmed */
    transform: scale(.75);  /* Make it smaller */
    opacity: 0.5;           /* Make it dimmer */
} 

#hanger.dim:hover {         /* To change back on hover only when it is dimmed */
    transform: scale(1);    /* Back to original size */
    opacity: 1;             /* Back to original opacity */
}

$(window).on("scroll", function() {        /* When window scrolls, */
    if ($(window).scrollTop() > 50) {      /* Check if it scrolls more than 50 pixels */
        $("#hanger").addClass("dim");      /* Apply class dim */
    } else {
        $("#hanger").removeClass("dim");   /* Otherwise remove class dim */
    }
});