javascript - 滚动上的褪色元素

标签 javascript html scroll visibility fade

我很好奇如何创建一个 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/

相关文章:

javascript - 如何将此字符串 "07/10/2017 18:30 PM"转换为 JavaScript 日期类型

html - Opera 浏览器中的边界半径和溢出

javascript - 如何用CSS下推整个页面

qt - 如何将 QPlainTextEdit 滚动到顶部?

jquery - 修复了滚动条上的 div...需要将主体向下推以补偿 div 高度吗?

javascript - jQuery UI : TypeError: $(. ..).accordion 不是函数

javascript - 为什么react-native中默认 View 宽度是100%?为什么使用alignItems时没有默认宽度?

html - CSS:以类似表格的方式分布非表格元素

Javascript对象固定滚动

javascript - 使用正则表达式从字符串中获取子字符串