Question

我试图在使用不透明度时使淡入淡出淡入淡出而在此处滚动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/ UPDATE 使用Bojan Petkovski的代码[感谢他]从第一个答案开始，它在chrome上工作但在firefox http://jsfiddle.net/jery0cdp/5/仍然面临同样的问题

Answer 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);
    }
});

滚动时不变的不透明度不起作用

1 个答案: