前言:六一儿童节的第二天快乐。
需求:父级页面有一个按钮,父页面iframe引入了vue项目生成的子页面index.html
子页面滚动的时候,当滚动距离<100时,父页面按钮消失,>100父页面按钮显示
父页面
// 供子页面调用
function isshowBartop(scrollTop){
//scrollTop为子页面滚动条的滚动的值
//如果scrollTop<100,回到顶部的按钮消失
if(scrollTop<100){
$('.jsgotop').fadeOut();
}else{
$('.jsgotop').fadeIn();
}
}
子页面(vue项目生成后的index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>大家好</title>
</head>
<body>
<div id="app"></div>
<script>
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
window.parent.isshowBartop(scrollTop);
}
</script>
</body>
</html>