当你用CSS3滚动时，你能修复一个div并让它改变不透明度、大小和位置吗

Question

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

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

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

此外，我查看了页面的源代码，无法从其中包含的css和脚本中找到它。

这是我目前掌握的一部分。尚未开始滚动：

HTML

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

CSS

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

JavaScript

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

http://jsfiddle.net/thed0ctor/1kx5jg1e/

Answer 1

您可以通过CSS3 transform和一点Javascript/jQuery:的组合轻松实现这一点

演示Fiddle：http://jsfiddle.net/abhitalks/hcwyth8n/2/

相关CSS：

#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 */
}

相关jQuery代码：

$(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 */
    }
});

希望能有所帮助。

Answer 2

仅伪代码：

---

window.woll（function）｛

if（window.scrolltop>selectedElement.offset（）.top）｛

selectedElement.animate（｛
变换：比例（.75），
不透明度：.5
位置：固定
})；

}其他｛

selectElement.animate（｛
变换：比例（.75），
不透明度：1
位置：静态
})；

}

})；

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