Position: Fixed in Sidebar - How to stop it before footer?

Question

I am using jQuery for floating widget in my sidebar - link to my post http://www.product-investigation.com/fat-loss-factor-review - if you scroll down, you can see what I mean ..I want to stop my adsense widget in sidebar before footer..thanks for help :)

My javascript

<script>
$(document).ready(function() {
        function isScrolledTo(elem) {
            var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
            var docViewBottom = docViewTop + $(window).height();
            var elemTop = $(elem).offset().top; //num of pixels above the elem
            var elemBottom = elemTop + $(elem).height();
            return ((elemTop <= docViewTop));
        }
        var catcher = $('#catcher');
        var sticky = $('#sticky');
        $(window).scroll(function() {
            if(isScrolledTo(sticky)) {
                sticky.css('position','fixed');
                sticky.css('top','100px');
            }
            var stopHeight = catcher.offset().top + catcher.height();
            if ( stopHeight > sticky.offset().top) {
                sticky.css('position','absolute');
                sticky.css('top',stopHeight);
            }
        });
    });
    </script>

Have you tried putting the `if(isScrolledTo(sticky))` inside an `else` statement? Somewhat like `if(stopHeight > sticky.offset().top){...}else{ if(isScrolledTo(sticky)){...} }`.. — dunli, Jan 12 '13 at 00:08
Uh... can you setup [jsfiddle](http://jsfiddle.net)? So that I can help you debug your problem? — dunli, Jan 12 '13 at 01:48

dunli · Answer 1 · 2013-01-12T03:36:34.213

I've updated your jsfiddle. I changed something in your conditions:

return ((elemTop <= docViewTop || elemTop >= docViewTop)); //Changed your return in isScrolledTo

Explanation: The code that I added below will position the sticky div at the top of the footer, If I use your original return statement and scroll up, the sticky div's position will still be absolute on top of the footer. It's because your return statement will only check if the top position of the element is less or equal to the scrollTop() value, which can only be used during scrolldown. In my case where the sticky is already at the bottom part, the isScrolledTo() should also check if the top of the sticky div is greater or equal to the scrollTop() value.

and added some things in the .scroll()

$(window).scroll(function() {
    if(isScrolledTo(sticky)) {
      sticky.css('position','fixed');
      sticky.css('top','2px');
    }
    var stopHeight = catcher.offset().top + catcher.height();
    var stickyFoot = sticky.offset().top + sticky.height();

    if(stickyFoot > footTop -10){ //Check if sticky's foot passes footer's top
      console.log("Top of Footer");
      sticky.css({
        position:'absolute',
        top: (footTop - 20) - sticky.height()
      });
    } else {
      if ( stopHeight > sticky.offset().top) {
        console.log("Default position");
        sticky.css('position','absolute');
        sticky.css('top',stopHeight);
      }
    }
});

Hope it helps.

This is a great answer and works well, my only criticism (and it is really minor) is that you have two divs in your js fiddle with the same id "catcher" this would not be valid html, In my solution i changed it to a class and it worked fine. — Code Pharaoh, Aug 09 '13 at 08:36

Position: Fixed in Sidebar - How to stop it before footer?

1 Answers1

Linked