javascript 创建一个随页面滚动而移动的浮动小部件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9470864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 06:46:59  来源:igfitidea点击:

Creating a Floating Widget that moves as the page scrolls

javascriptjquerycsswordpresswidget

提问by user1048676

All, I'm using Wordpress widgets but I'd like to create a widget that floats down with the page as your scroll. Has anyone ever done anything like this? If so, can you give any recommendations on how to achieve such a widget? Is it done merely by Javascript/CSS?

所有,我正在使用 Wordpress 小部件,但我想创建一个小部件,当您滚动时,它会随着页面向下浮动。有没有人做过这样的事情?如果是这样,您能否就如何实现这样的小部件提出任何建议?是否仅由 Javascript/CSS 完成?

Thanks!

谢谢!

采纳答案by Kamil Kiedrowski

slashnick's and maxedison's solutions will work.

slashnick 和 maxedison 的解决方案将起作用。

If you'd like to have a dynamic scrolling box that doesn't always stay on the screen or minds the header, footer or any other div of your site, you might want to check out DropTheBit's sticky float jQuery plugin: http://dropthebit.com/74/sticky-floating-box/

如果您希望动态滚动框不总是停留在屏幕上或关注您网站的页眉、页脚或任何其他 div,您可能需要查看 DropTheBit 的粘性浮动 jQuery 插件:http:// dropthebit.com/74/sticky-floating-box/

回答by maxedison

All you need to do is set the position of the element in question to fixedvia CSS, i.e.

您需要做的就是fixed通过 CSS将相关元素的位置设置为

.myFloatingWidget {position:fixed; left:0px; top:50%}

回答by Max Bond

The easiest way - to install this new WordPress plugin - Q2W3 Fixed Widget

最简单的方法 - 安装这个新的 WordPress 插件 - Q2W3 Fixed Widget

It was specifically designed for this purpose!

它是专门为此目的而设计的!

Screenshots

截图

回答by slashnick

You need to give the widget a style of position:fixed;. Example at W3Schools.

您需要为小部件提供position:fixed;. W3Schools 的示例。