jQuery

【jQuery】jQueryを使用したスティッキーボトムSticky Bottom with offsetBottom

January 18, 2018
Sticky Bottom with offsetBottom

Sticky Bottom with offsetBottomはjQueryを使用したスティッキーボトム。

JS

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       <script>
            stickyBottom('#static', '#sticky');
            function stickyBottom(staticDiv, stickyDiv) {
                var content = $(stickyDiv).children().clone();
                $(staticDiv).empty().append(content);
                $(staticDiv + ' .divContent').removeClass('container');
                stickylogic();
                $(window).scroll(function () {
                    stickylogic();
                });
                function stickylogic() {
                    var scrollPx = $(window).scrollTop(),
                        staticTop = $(staticDiv).offset().top,
                        viewPortHeight = window.innerHeight,
                        stickyHeight = $(stickyDiv).outerHeight(),
                        staticStartingPx = staticTop - (viewPortHeight - stickyHeight);
                    if (scrollPx >= staticStartingPx)
                        $(stickyDiv).hide();
                    else
                        $(stickyDiv).show();
                }
            }
            $(document).on('click', '.arrow', function () {
                window.scrollTo(0, 0);
                $('.arrow').toggleClass('open');
                $('#mainContent, #sticky').toggle();
            });
        </script>

MIT
Demo/Download