[英]How can I make a button appear on scroll just using 'plain' html, CSS and Javascript
I've tried to accomplish this, (since I am a noob at coding...) with a concept I found online... it didn't work out very well, and offline the scroll padding and "Sign In' button appears for a second than disappears...我试图用我在网上找到的一个概念来实现这一点(因为我是编码的菜鸟......)......效果不太好,并且离线滚动填充和“登录”按钮出现一秒钟后就消失了……
To view web:要查看 web:
if someone can please send me a simple code including: Html, (Css,) JavaScript, (no Jquery) of how to accomplish the same idea (of the button) on that site...如果有人可以请给我一个简单的代码,包括:Html,(Css,)JavaScript,(没有Jquery)如何在该网站上完成相同的想法(按钮)......
Thank You!谢谢你!
You want to listen for window scroll events and check to see if the main button is visible.您想监听 window 滚动事件并检查主按钮是否可见。 You can do this by checking it's position inside the window using Element.getBoundingClientRect();
您可以通过使用Element.getBoundingClientRect();
The bottom
property tells you how many pixels the bottom of the element is from the top of the screen. bottom
属性告诉你元素的底部距离屏幕顶部有多少像素。 If the number is below zero, it means the bottom of the element is off the top of the screen.如果数字小于零,则表示元素的底部不在屏幕顶部。
At that point, just toggle the hidden button into view.此时,只需将隐藏按钮切换到视图中。 In my demo, I did this by adding a CSS class to that button.在我的演示中,我通过向该按钮添加 CSS class 来做到这一点。
If the user scrolls up and the main button is visible again, you can hide the side button by removing the class you previously added to it.如果用户向上滚动并且主按钮再次可见,您可以通过删除之前添加到其中的 class 来隐藏侧按钮。
Using scroll event with getBoundingClientRect may decrease performance You can use intersection observer for checking an element enter in viewport https://developers.google.com/web/updates/2016/04/intersectionobserver使用带有 getBoundingClientRect 的滚动事件可能会降低性能您可以使用交叉点观察器检查在视口中输入的元素https://developers.google.com/web/updates/2016/04/intersectionobserver
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.