某网站滚动％后的浮动div

我真的不知道从哪里开始搜索。说实话，我甚至不知道如何搜索，因为我不知道它是如何调用的。（也许平视？但我得到的是汽车改装的东西）某网站滚动％后的浮动div

什么我找了附加形象。当用户滚动一定比例的网站时，会显示一条消息。当将鼠标悬停在消息上时，它会展开。我想要做一些附加的图像。

难道有谁知道在哪里可以搜索？什么？

希望有人能帮助我。

问候康斯坦丁

at the bottom right is the div

mouse over, expands the div

来源

2016-09-17 Fly Guy

http://jsfiddle.net/tjbaezid/d010s4rg/也许这会帮助你。 –

欢迎来到Stack Overflow！你的问题对于直接回答来说太宽泛了，所以很可能需要关闭。然而，您所描述的想法可以使用CSS动画和JavaScript来实现。为'onscroll'事件创建一个JS事件侦听器，并在跨越阈值时触发CSS动画。为了使消息“增长”，应该有一个简单的CSS“悬停”状态。 –

或者哟只能使用CSS


 

 
#div1{ 
 
height:50px; 
 
overflow:hidden; 
 
} 
 
#div1:hover{ 
 
height:300px; 
 

 
    -moz-transition: .4s all ease-in-out; 
 
    -ms-transition: .4s all ease-in-out; 
 
    -webkit-transition: .4s all ease-in-out; 
 
    -o-transition: .4s all ease-in-out; 
 
}

<div id="div1"> 
 
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 

 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 

 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
</div>

来源

2016-09-17 14:38:29

#div1 { 
 
    height: 50px; 
 
    overflow: hidden; 
 
    transition: .4s all ease-in-out; 
 
} 
 
#div1:hover { 
 
    height: 300px; 
 
}

<div id="div1"> 
 
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 

 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 

 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
</div>

修改@穆斯塔法的代码了一下，你也可以有一个平稳过渡回来。

此外，transition property不会在最新版本的所有主要的浏览器需要prefixes。

来源

2016-09-18 00:55:04 StardustGogeta

冷静，非常感谢你的家伙....

*编辑：但什么是代码，使其出现在页面的右下角被粘？ - 我的意思是，当我滚动页面仍然在右下角......

来源

2016-09-18 05:28:13

某网站滚动％后的浮动div

回答

相关问题