滚动上的衰落元素

我很好奇我如何创建一个DIV（或任何真正的），当用户向下滚动页面时我可以淡入淡出（或更改不透明度）。这个DIV会位于页面顶部，但只有在页面顶部才能清晰可见。滚动上的衰落元素

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

2009-09-27 marck

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-27 22:06:53 karim79

感谢您的回复！我得到了这个操作，但是对于jquery和javascripting这个世界来说是全新的，我不确定该从哪里去。该框会淡入淡出或滚动，但无论我是否再次滚动到顶部，它似乎都会褪色。我怎样才能控制在淡出前有多远？再次感谢！ – marck 2009-09-28 05:42:03

不幸的是，没有提供完整的解决方案，没有太多可以提供的帮助。如果你真的有兴趣让这个工作，你可能需要挖掘并学习一些JavaScript。 – 2009-10-05 03:11:56

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

来源

2009-09-27 21:05:33 Anatoliy

我想我会使用scrollTop的实际价值决定的不透明度，从而获得平滑的淡入淡出搏一搏。我还为第二部分添加了悬停状态。 Thanks to David为我提炼数学。

//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-07 06:52:47 Daniel

由于某些原因，这似乎不适用于FF 8.0.1？ – Daniel 2011-12-08 05:20:03

然而，IE浏览器似乎无法正常工作，但在FF和IE上，悬停都起作用。所以我想在jQuery和CSS不透明工作跨浏览器？！ – Daniel 2011-12-09 07:53:26

滚动上的衰落元素

回答

相关问题