Javascript 卷轴上的淡入淡出元素

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

---

此外，如果我可以让这个元素在onmouseover中淡出，无论页面上当前的滚动位置如何，这将是一个理想的选择。

使用滚动事件，并分析document.documentElement.scrollTop的值以设置适当的不透明度。

将提供简洁的解决方案，同时隐藏大多数浏览器差异。下面是一个快速的模型，让您开始：

<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>

//当加载DOM时
$（文档）.ready（函数（）{
//将一些代码附加到窗口对象的滚动事件
//或任何元素，请参见http://docs.jquery.com/Selectors
$（窗口）。滚动（函数（）{
var height=$（'body'）.height（）；
var scrollTop=$（'body'）。scrollTop（）；
var不透明度=1；
//在这里做一些数学，通过放置一些条件或公式
如果（滚动顶部>400）{
不透明度=0.5；
}
//设置div id=“someDivId”的不透明度
$（'#someDivId'）.css（'opacity'，opacity）；
});
});

另见：

---

我想我会尝试使用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);
    });
});

//如果滚动页面，则降低横幅的不透明度。
$（窗口）。滚动（函数（）{
变量高度=$（“主体”）.height（）；
var scrollTop=$（“body”）.scrollTop（）；
var不透明度=1；
如果（滚动顶部<41）
{opacity=1-Math.floor（scrollTop）/100；}
其他的
{不透明度=0.6；}
$（“#标题”）.css（“不透明度”，不透明度）；
$（“#头”）.hover（函数（）{
$（this.css（“不透明度”，1）；
}，函数（）{
$（this.css（“不透明度”，0.6）；
});
});

谢谢您的回复！我得到了可操作性，但是对于jquery和javascripting的世界来说是完全陌生的，我不确定从这里走到哪里。框确实会褪色或滚动，但无论我是否再次滚动到顶部，它似乎都会保持褪色状态。我怎样才能控制在它消失之前滚动的距离？再次感谢！！不幸的是，如果不能为您提供完整的解决方案，那么就没有更多的帮助了。如果你真的对这项工作感兴趣，你可能需要深入学习一些JavaScript。然而，IE似乎不起作用，在FF和IE上，悬停都能起作用。所以我认为jquery和css不透明性在跨浏览器中不起作用？！