提问人：user21002669 提问时间：10/7/2023 最后编辑：user21002669 更新时间：10/8/2023 访问量：81
Bg 滚动时的不透明度变化
Bg Opacity change on scroll
问：
这里的初学者，和一个目前无法帮助我的朋友一起开发一个网站，并且，我试图添加一个背景功能，以便在滚动网站时淡入。我在网上阅读了很多，但想不出适合我的方法，这是他/代码：
const TopbarContainer = ({ children }: { children: ReactNode }) => (
<div className="sticky top-0 bg-orange backdrop-blur-md">
{children}
</div>
);
用打字稿、顺风、React 编码。
尝试了很多，请建议我使用最好的功能，使用以下效果来配合它;
window.addEventListener（'滚动'，
答：
0赞
uaFrontEnder
10/7/2023
#1
要添加更改背景不透明度的函数，可以使用钩子和钩子。useRefuseState
首先，使用钩子创建对要更改其背景不透明度的元素的引用。然后，使用钩子来存储当前的不透明度值。useRefuseState
要更改不透明度值，可以使用该函数设置新的不透明度值。然后，可以使用该对象访问元素并将属性设置为新值。setStaterefopacity
下面是如何执行此操作的示例：
import React, { useRef, useState } from "react";
const TopbarContainer = ({ children }: { children: ReactNode }) => {
const ref = useRef<HTMLDivElement>(null);
const [opacity, setOpacity] = useState(1);
const handleOpacityChange = (newOpacity: number) => {
setOpacity(newOpacity);
ref.current!.style.opacity = newOpacity.toString();
};
return (
<div
className="sticky top-0 bg-orange backdrop-blur-md"
ref={ref}
style={{ opacity }}
>
{children}
</div>
);
};
现在，您可以使用该函数更改顶栏容器的不透明度。例如，您可以创建一个按钮，该按钮使用新的不透明度值调用函数：handleOpacityChange
<button onClick={() => handleOpacityChange(0.5)}>
Set opacity to 50%
</button>
您还可以使用挂钩创建允许用户调整不透明度值的滑块。useState
const TopbarContainer = ({ children }: { children: ReactNode }) => {
const ref = useRef<HTMLDivElement>(null);
const [opacity, setOpacity] = useState(1);
const handleOpacityChange = (newOpacity: number) => {
setOpacity(newOpacity);
ref.current!.style.opacity = newOpacity.toString();
};
return (
<div
className="sticky top-0 bg-orange backdrop-blur-md"
ref={ref}
style={{ opacity }}
>
{children}
<input
type="range"
min={0}
max={1}
value={opacity}
onChange={(e) => handleOpacityChange(parseFloat(e.target.value))}
/>
</div>
);
};
评论
1赞
moonwave99
10/7/2023
请停止发布 ChatGPT 废话，同时使用 useState 和 useRef 是没有意义的。
0赞
user21002669
10/7/2023
我忘了添加滚动事件，例如window.addEventListener（“scroll” ...
0赞
user21002669
10/8/2023
#2
import React, { useRef, useState } from "react";
const TopbarContainer = ({ children }: { children: ReactNode }) => {
const ref = useRef<HTMLDivElement>(null);
const [opacity, setOpacity] = useState(1);
const handleOpacityChange = (newOpacity: number) => {
setOpacity(newOpacity);
ref.current!.style.opacity = newOpacity.toString();
};
return (
<div
className="sticky top-0 bg-orange backdrop-blur-md"
ref={ref}
style={{ opacity }}
>
{children}
</div>
);
};
这段代码有帮助，但是，我希望它只改变背景的不透明度。这可能吗？
评论