Stała pozycja Fade in / out div, gdy użytkownik przewija do dołu strony

Wydaje się to dość elementarne, ale próbuję uzyskać stopkę stopki o stałej pozycji, która przesunie się i zniknie, gdy użytkownik przewinie do samego dołu strony internetowej, a następnie przesunie się i zniknie, gdy użytkownik przewinie się do tyłu. Przeszukałem Stack Overflow, a inni zasugerowali rozwiązania, ale mój kod powoduje, że mój div się przesuwa i przenika. Nie mogę uzyskać div, aby przesuwał się i znikał, gdy użytkownik przewija się do tyłu.

Również ten div przesuwa się i zanika zaraz po rozpoczęciu przewijania. Potrzebuję go, aby poczekał, aż dotrze do dolnej części strony (lub niewidocznego div, który mógłbym umieścić na dole strony) przed slajdami i ustawieniami Div.

Jakieś sugestie?

jQuery:

$(function() {
    $('#footer').css({opacity: 0, bottom: '-100px'});
    $(window).scroll(function() {
        if( $(window).scrollTop + $(window).height() > $(document).height() ) {
            $('#footer').animate({opacity: 1, bottom: '0px'});
        }
    });
});

HTML:

<div id="footer">
    <!-- footer content here -->
</div>

CSS:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    z-index: 26;
}
Dzięki za pomoc!

questionAnswers(1)

yourAnswerToTheQuestion