不知大家在前端开发实践中有没有做过这样一个效果,就是页面布局中有一个顶部通栏的搜索登录框,我们的需求就是当鼠标向下滚动时,顶部通栏始终固定在顶部,并且默认顶部是透明背景,而当页面滚动时,顶部通栏的透明度随着页面卷曲的高度增加而变大,当页面滚动距离超过某一个高度时,透明度就固定不变了。顶部通栏 ...
监听页面滚动事件 window.onscroll 获取页面滚动高度 document.documentElement.scrollTop在桌面端可用,在移动端值一直为 document.body.scrollTop在移动端可用,在桌面端一直为 说明移动端滚动的元素是 document.body ,在桌面端滚动的元素是 document.documentElement。滚动的元素不一致 window ...
2019-09-19 19:35 0 424 推荐指数:
不知大家在前端开发实践中有没有做过这样一个效果,就是页面布局中有一个顶部通栏的搜索登录框,我们的需求就是当鼠标向下滚动时,顶部通栏始终固定在顶部,并且默认顶部是透明背景,而当页面滚动时,顶部通栏的透明度随着页面卷曲的高度增加而变大,当页面滚动距离超过某一个高度时,透明度就固定不变了。顶部通栏 ...
说明:因为监听是针对window的,所以增加监听后每个页面都会监听,只对某个页面进行监听的话需要在destroyed中将监听移除 ...
不知大家在前端开发实践中有没有做过这样一个效果,就是页面布局中有一个顶部通栏的搜索登录框,我们的需求就是当鼠标向下滚动时,顶部通栏始终固定在顶部,并且默认顶部是透明背景,而当页面滚动时,顶部通栏的透明度随着页面卷曲的高度增加而变大,当页面滚动距离超过某一个高度时,透明度 ...
html: js: ...
html结构: 在mounted事件中监听滑动事件 可以添加销毁事件 在methods中定义一个方法 ...
监听页面滚动 在methods中定义一个方法 handleScroll () { html中 在mounted监听 最后要销毁这个监听要不然会在其他的页面中 执行 报错 ...
$(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 var viewH = $(window).height(); //可见高度 ...
1、当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2、获取指定元素的页面位置: $(val).offset().top; 3、对页面滚动条滚动的监听:要放在页面加载 ...