html+css+js实现右下角悬浮框demo

以下代码均可cv

HTML代码

<!--body中的部分-->
<div class="floating-box">
	<h2>悬浮框标题</h2>
	<p>这是一段悬浮框内容。</p>
</div>
<!--直接将这段代码cv后看不出效果，
可以在下面增加50个<h1>展示效果-->

CSS

.floating-box {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #f3f3f3;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

js

var floatingBox = document.querySelector('.floating-box');
window.addEventListener('scroll', function() {
	if (window.pageYOffset >= 200) {
		floatingBox.classList.add('show');
	} else {
		floatingBox.classList.remove('show');
	}
});

效果展示

在悬浮框的html下面加了50个<h1>标签，内容是哈哈哈，结果如下 image.png