Javascript滚动按钮

Question

如何制作如下按钮：http://www.ideabank.pl?

我所说的按钮是主横幅下面的9个按钮。

• 滚动时展开到顶部（已设置动画）
• 更改文本

我该怎么做？

Answer 1

这是JSfiddle

基本HTML是

<div id="box">
    <a href='#'>
        <div class="col_inside">
            <span class="span-inside">Button</span>
        </div>
    </a>
</div>

有一个包含链接div的框。这个div成为按钮，因为它被包装在标签中。

CSS

#box {
    width: 600px;
    height: 240px;
    background: black;
    position: relative;
}
.col_inside {
    position: absolute;
    bottom: 0;
    width: 600px;
    height: 60px;
    transition: height 0.5s linear;
    background: #0096de;
    text-align: center;
}
.col_inside .span-inside:last-child {
    display: none;
}
.col_inside:hover {
    height: 90px;
}
.col_inside:hover span:first-child {
       display: none;
}
.col_inside:hover span:last-child {
    display: inline-block;
}
.span-inside {
    display: inline-block;
    margin: 20px;
    text-decoration: none;
    color: white;
}

你最感兴趣的部分是

.col_inside {
    height: 60px;
    transition: height 0.5s linear;
}
.col_inside:hover {
   height: 90px;
}

转换采用要应用转换的属性、持续时间和定时函数