我很好奇如何创建一个 DIV(或任何真正的东西),当用户向下滚动页面时我可以淡化(或改变其不透明度)。此 DIV 位于页面顶部,但只有在页面顶部时才清晰可见。
此外,如果我可以让这个元素在 onmouseover 中淡出,而不考虑页面上的当前滚动位置,那将是理想的。
最佳答案
jQuery将允许一个简洁的解决方案,同时隐藏大多数浏览器差异。这是一个让您入门的快速模型:
<script type="text/javascript">
//when the DOM has loaded
$(document).ready(function() {
//attach some code to the scroll event of the window object
//or whatever element(s) see http://docs.jquery.com/Selectors
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $('body').scrollTop();
var opacity = 1;
// do some math here, by placing some condition or formula
if(scrollTop > 400) {
opacity = 0.5;
}
//set the opacity of div id="someDivId"
$('#someDivId').css('opacity', opacity);
});
});
</script>
另见:
关于javascript - 滚动上的褪色元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1484467/