2014-09-23 61 views
0

我試圖讓一個div淡入和淡出使用不透明而在這裏滾動的JS代碼變化的不透明度,同時滾動不工作

$(document).ready(function(){ 
     window.onscroll = scrolls; 
    }); 
    function scrolls(){ 
     var offset = $("#scrollMore").offset(); 
     var w = $(window); 
     var welcome = offset.top-w.scrollTop(); 
     console.log(welcome); 
     if(welcome<100) { 
      $("#scrollMore").fadeTo("slow",1); 
     } 
     else if(welcome>=100){ 
      $("#scrollMore").fadeTo("slow",0.1); 
     } 
    } 

CSS

#scrollMore { 
     background: url("http://www.wiltshirefarmfoods.com/images/scrollMore.png") no-repeat scroll center bottom transparent; 
     cursor: pointer; 
     height: 42px; 
     right: 36px; 
     text-indent: -9999px; 
     width: 124px; 
     z-index: 100; 
     float: left; 
     opacity: 0.1; 
    } 

但它不工作這是花了這麼長時間淡入淡出這裏的jsfiddle http://jsfiddle.net/jery0cdp/3/ 更新 後使用Bojan Petkovski代碼[感謝他]從第一個答案它在鉻上工作,但仍然面臨同樣的問題在Firefox上http://jsfiddle.net/jery0cdp/5/

回答

1

可能做這樣的事情http://jsfiddle.net/jery0cdp/5/

$(document).scroll(function() {  

    var doc = $(this).scrollTop() + 300; 
    var elem = $("#scrollMore").offset().top; 

    if (doc > elem) { 
     $("#scrollMore").animate({'opacity': 1 }, 200); 
    } else { 
     $("#scrollMore").animate({'opacity': 0.1 }, 200); 
    } 
}); 
+0

現在的工作非常感謝幫助 – 2014-09-23 12:02:06

+0

面臨的Firefox同樣的問題 – 2014-09-23 12:09:20