Как сделать отдельную прозрачность для браузера IE?

Question

С помощью приведенных ниже css и Jquery я установил непрозрачность по умолчанию, равную 0, и она будет равна 1, когда страница прокручивается, что означает, что липкий нижний колонтитул виден после прокрутки какой-либо страницы.

Я применил ниже css для нижнего колонтитула моего сайта:

.site-footer{
    opacity:0;  /*I have made this opacity 0 by default and once page scrolled down, it will convert to opacity:1 through jquery written in custom javascript section*/
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index:-1;
}

А также применяется ниже jquery:

$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop()>100)
        {
            $(".site-footer").css({"opacity":"1"});
        }
        else
        {
            $(".site-footer").css({"opacity":"0"});
        }
    });
});

Этот код отлично работает в другом браузере, кроме IE (I использовал IE11), нижний колонтитул не отображается в браузере IE. Когда я его проверяю, он будет принимать только непрозрачность: 0, которая является непрозрачностью по умолчанию, которую я применил выше CSS означает, что Jquery, который я применил выше, не работает в браузере IE.

Пожалуйста, предложите .