特定百分比的网站滚动后浮动 div答案

【问题标题】：Floating div after certain % of website scrolling特定百分比的网站滚动后浮动 div
【发布时间】：2016-09-17 14:25:08
【问题描述】：

我真的不知道从哪里开始搜索。老实说，我什至不知道如何搜索，因为我不知道它是如何调用的。（也许是提醒？但我得到的只是汽车改装的东西）

我在附图中寻找什么。当用户滚动网站的某个百分比时，会出现一条消息。当“鼠标悬停”消息时，它会展开。我想做一些类似于所附图像的事情。

有人知道我在哪里可以搜索到吗？为了什么？

希望任何人都可以帮助我。

问候康斯坦丁

at the bottom right is the div

mouse over, expands the div

【问题讨论】：

jsfiddle.net/tjbaezid/d010s4rg 也许这会对你有所帮助。
欢迎来到 Stack Overflow！您的问题过于宽泛，无法直接回答，因此很可能需要关闭。但是，您所描述的想法可以使用 CSS 动画和 JavaScript 来实现。为onscroll 事件创建一个JS 事件监听器，并在它超过阈值时触发CSS 动画。为了让消息“增长”，一个简单的 CSS hover 状态应该可以工作。

标签： html floating

【解决方案1】：

或者你只能使用 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>

【讨论】：

【解决方案2】：

#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>

稍微修改@Mostafa的代码，也可以平滑过渡回来。

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

【讨论】：

【解决方案3】：

太棒了，非常感谢你们......

*edit：但是让它出现在页面右下角并具有粘性的代码是什么？ - 我的意思是当我滚动页面时它仍然在右下角......

【讨论】：