Help stopping a fixed div at the footer div?

[visumdesignz]

Any suggestions how I can get the .floater-bar-single div on my site to stop at the footer div?

Here is what it looks like www.michaelaubry.com

As you can see there is a fixed div to the left, it's nice until you scroll down to the footer.

I am great with HTML, CSS, but I am pretty sure this calls for a bit of java, I would like to learn a bit of java and fix my issue at the same time.

Thanks to all you java whizzes! Pretty sure this is a piece of cake answer for ya!

[VIPStephan]

I had something like this on a site I made (you can see it on http://tinyurl.com/c23pruw) and it is quite tricky if you ask me. First of all, you need to change the position type (fixed/absolute) depending on the scroll position. But you never know how long your page is (content height and footer height can change over time) and the height of the viewport (browser window) is also different for everyone so you also need to calculate the height of the content or document, the height of the positioned element, and the height of the viewport and need to add and subtract each other in various if/else conditions.

You can find the function I used for that on http://tinyurl.com/cvtryjc from line 558 to line 639.

And by the way: Java is not JavaScript. In fact, it’s something almost completely different.

[visumdesignz]

Originally Posted by VIPStephan

I had something like this on a site I made (you can see it on http://tinyurl.com/c23pruw) and it is quite tricky if you ask me. First of all, you need to change the position type (fixed/absolute) depending on the scroll position. But you never know how long your page is (content height and footer height can change over time) and the height of the viewport (browser window) is also different for everyone so you also need to calculate the height of the content or document, the height of the positioned element, and the height of the viewport and need to add and subtract each other in various if/else conditions.

You can find the function I used for that on http://tinyurl.com/cvtryjc from line 558 to line 639.

And by the way: Java is not JavaScript. In fact, it’s something almost completely different.

Ah I see that on your site, I love that kind of functionality! Plus I like the minimal sleek design, looks great.

Yeah that just shows ya how much I know about javascript, I have played with in on slideshows, it kinda makes sense but then at the same time it blows my mind lol.

Let me try to use the link you provided and see if I can get this bad boy to function!

Thanks.

[visumdesignz]

Here is the code, since I am unfamiliar with javascript, to save myself the headache I need to figure out these questions.

My div (.floater-bar-single) is the div that is fixed and floating to the left, what in the code below do I replace it with?

Also the div that I want it to stop at is the #footerwrapper div, what do I replace that with?

  $('#ueberblick .autor, #info div a.autor, #nebeninhalt .abschnitt .autor').append('<span class="rahmen" />');
        if($('#info').length) {
            // mitscrollender inhalt
            var el1 = $('#info .aktion');
            var el2 = $('#info #ueberblick');
            var els = $('#info .aktion,#info #ueberblick');
            el2.data("left", el2.css("left"));
            var c = $('#container');
            var cPos = c.offset();
            var abstand = 45;
            var eTop = el2.offset().top-abstand;
            var e2Pos = el2.position();
            var pad = parseInt(c.css('padding-left'),10);
            var elPos = function() {
                cPos = c.offset();
                if(win.scrollTop() > eTop) {
                    // begin el1
                    if(winHeight > el1.height()+abstand) {
                        if((win.scrollTop()+el1.outerHeight()+abstand) > ($(document).height()-$('#fuss').outerHeight()-parseInt($('#inhalt').css('margin-bottom'),10))) {
                            el1.removeClass('fixed').css({
                                top: $('#info').outerHeight()-el1.outerHeight()+'px',
                                left: '0'
                            });
                        }
                        else {
                            el1.addClass('fixed').css('top','45px');
                        }
                    }
                    else {
                        el1.removeClass('fixed').removeAttr('style');
                    } // end el1
                    // begin el2
                    if(winHeight > el2.height()+abstand) {
                        if((win.scrollTop()+el2.outerHeight()+abstand) > ($(document).height()-$('#fuss').outerHeight()-parseInt($('#inhalt').css('margin-bottom'),10))) {
                            el2.removeClass('fixed').css({
                                top: $('#info').outerHeight()-el2.outerHeight()+'px',
                                left: el2.data("left")
                            });
                        }
                        else {
                            el2.addClass('fixed').css('top','45px');
                        }
                    }
                    else {
                        el2.removeClass('fixed').removeAttr('style');
                    } // end el2
                    if(winWidth < c.outerWidth()) {
                        if(el1.is('.fixed')) {
                            el1.css('left',(pad-win.scrollLeft())+'px');
                        }
                        if(el2.is('.fixed')) {
                            el2.css('left',((pad+e2Pos.left)-win.scrollLeft())+'px');
                        }
                    }
                    else {
                        if(el1.is('.fixed')) {
                            el1.css('left',cPos.left+pad+'px');
                        }
                        if(el2.is('.fixed')) {
                            el2.css('left',cPos.left+e2Pos.left+pad+'px');
                        }
                    }
                } // end if scrolltop
            }; // end function elPos()
            if(win.scrollTop() > eTop) {
                el1.addClass('fixed');
                elPos();
                win.resize(elPos);
            }
            win.scroll(function() {
                if($(this).scrollTop() > eTop) {
                    el1.addClass('fixed');
                    if(winHeight > el2.height()) {
                        el2.addClass('fixed');
                    }
                    elPos();
                    win.resize(elPos);
                }
                else {
                    els.removeClass('fixed').removeAttr('style');
                }
            });
            // ende mitscrollender inhalt
            $('#info')
                .find('div.mehr').after(
                $('<a>', {
                    'class': 'link_mehr',
                    text: '+ mehr lesen'
                }).toggle(
                    function() {
                        $(this).text('- weniger lesen').prev().fadeIn();
                    },
                    function() {
                        $(this).text('+ mehr lesen').prev().hide();
                    }
                )
            )
                .end()
                .find('#ueberblick a.buch:not(.hart,.ebook)')
                .append(
                $('<span>', {
                    'class': 'blaettern',
                    text: 'Im Buch blättern'
                })
            )
                .hover(function() {
                    var me = $(this);
                    if(me.children('.info').length) {
                        me.children('.info').addClass('hover');
                    }
                    me.children('.blaettern').fadeToggle();
                })
                .end()
                .find('#ueberblick .ebook img')
                .parent()
                .addClass('glanz')
                .end()
                .appendTo($('#ueberblick .ebook'));
        } // end if #info length
        // termin-tabelle
        $('table .mehr')
            .closest('table')
            .after(
            $('<div>', {'class': 'link_mehr'}).append(
                $('<a>', {text: '+ mehr Termine'}).toggle(
                    function() {
                        $(this).text('- weniger Termine').parent().prev('table').find('.mehr,.mehr ~ tr').fadeIn();
                    },
                    function() {
                        $(this).text('+ mehr Termine').parent().prev('table').find('.mehr,.mehr ~ tr').hide();
                    }
                )
            )
        );