javascript - 滚动上的褪色元素

Question

我很好奇如何创建一个 DIV(或任何真正的东西)，当用户向下滚动页面时我可以淡化(或改变其不透明度)。此 DIV 位于页面顶部，但只有在页面顶部时才清晰可见。

此外，如果我可以让这个元素在 onmouseover 中淡出，而不考虑页面上的当前滚动位置，那将是理想的。

Answer 1

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>

另见:

• jQuery
• Selectors
• CSS
• Events/Scroll
• CSS/ScrollTop
• CSS/ScrollLeft