滾動上的衰落元素

我很好奇我如何創建一個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

滾動上的衰落元素

回答

相關問題