代码
/**
*
* @desc 自定义滚动内容菜单渐变 (可异步可同步)
* @param {string} parentDom 监听需要滚动的容器
* @param {string} changeDom 需要改变的背景的元素
* @param {array} rgba 传入rgba格式颜色用数组形式
*/
export async function scrollChangeMenu(parentDom, changeDom, rgba) {
let [r, g, b, a] = await rgba, cDom= $(`${changeDom}`), pDom= $(`${parentDom}`);
pDom.scroll(function () {
if ($(this).scrollTop() < cDom.outerHeight()) {
cDom.css('background', `rgba(${r},${g},${b},${a})`)
} else if (cDom.outerHeight() < $(this).scrollTop() <= 100) {
cDom.css('background', `rgba(${r},${g},${b},${1 - ($(this).scrollTop() - 100) / 100})`)
} else {
cDom.css('background', `rgba(${r},${g},${b},0)`)
}
})
}
试例：
scrollChangeMenu('.content', '.head', [51, 153, 255, 1]);
也可以用传id
scrollChangeMenu('#content', '.head', [51, 153, 255, 1]);
如果不用module方式导入html的话把方法前面的export去掉就可以直接用了
上面使用了模块式引入 使用之前import 一下（浏览器支持ES6 module） script标签的type记得加上module
<script type="module">
import {scrollChangeMenu} from 'xxx.js';
scrollChangeMenu('.content', '.head', [51, 153, 255, 1]);
</script>
别忘了引入JQ！
