6

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

此外，如果 II 可以让这个元素在鼠标悬停时淡出，这将是理想的，而不管页面上的当前滚动位置如何。

4

3 回答 3

8

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>

也可以看看：

于 2009-09-27T22:06:53.070 回答
2

我想我会尝试使用 scrollTop 的实际值来决定不透明度级别，从而获得平滑的淡入淡出。我还为第二部分添加了悬停状态。感谢大卫为我完善了数学。

//reduce the opacity of the banner if the page is scrolled.
$(window).scroll(function () {
  var height = $("body").height();
  var scrollTop = $("body").scrollTop();
  var opacity = 1;

  if(scrollTop < 41)
    {opacity = 1-Math.floor(scrollTop)/100;}
    else
    {opacity = 0.6;}

  $("#header").css("opacity", opacity);
  $("#header").hover(function(){
    $(this).css("opacity", 1);
    },function(){
    $(this).css("opacity", 0.6);
    });
});
于 2011-12-07T06:52:47.803 回答
0

使用滚动事件，并分析 document.documentElement.scrollTop 的值来设置适当的不透明度。 http://www.quirksmode.org/dom/events/scroll.html

于 2009-09-27T21:05:33.950 回答