0

I'm using the code below which adds a class of fixed to #sidebar once it reaches a certain height from the top of the site depending on what page it's on (i.e. home, single, page).

In a similar fashion, I would like to add a class of bottom to #sidebar once #sidebar reaches the bottom of its container (#content). If the user scrolls back up, the class of bottom should be removed and the class of fixed should be added back.

The goal is to try to get the fixed sidebar to move up with the rest of the content in its container once it reaches the bottom of it.

JavaScript

var threshold = 236;
if (jQuery(document.body).hasClass("home")) {
  threshold = 654;
} else if (jQuery(document.body).hasClass("single") || jQuery(document.body).hasClass("page")) {
  threshold = 20;
}

var scrolled = false;
jQuery(window).scroll(function () {  
  if (jQuery(window).scrollTop() >= threshold && !scrolled){
    jQuery('#sidebar').addClass('fixed');
    scrolled = true;
  } else if (jQuery(window).scrollTop() < threshold && scrolled) { 
    jQuery('#sidebar').removeClass('fixed');
    scrolled = false;
  }
});

HTML

<div id="container">

  <div id="content">

    <div id="sidebar"></div>

    <div id="masonry"></div>

  </div>

</div>
J82
  • 8,267
  • 23
  • 58
  • 87

1 Answers1

1

I believe this is what you are trying to do?

http://jsfiddle.net/M5sMx/33/

$(window).on("scroll", function() { // When you scroll the window, do this function
 updatePosition();
});

var tester = null;
function updatePosition() {

    var sidebar = $("#sidebar"); // Set #sidebar to a variable called "sidebar"
    if (tester == undefined) {
        // Create a tester div to track where the actual div would be. 
        // Then we test against the tester div instead of the actual div.
        tester = sidebar.clone(true).removeAttr("id").css({"opacity" : "0" }).insertAfter(sidebar);
    }

    // If the tester is below the div, make sure the class "bottom" is set.
    if (testPosition(tester)) {
        sidebar.addClass("bottom");
        console.log("Add class");
    }
    else {
        sidebar.removeClass("bottom");
        console.log("remove class");
    }
}

function testPosition(sidebar) {
    console.log(sidebar.offset().top + " + " + sidebar.outerHeight() +" >= " + sidebar.parent().offset().top + " + " + sidebar.parent().outerHeight());
    if (sidebar.offset().top + sidebar.outerHeight() >= sidebar.parent().offset().top + sidebar.parent().outerHeight()) return true;
    return false;
}

HTML

<div class="body">
    <div class="leftBar">
        La la links
        <div class="floater" id="floater">
            Pooper scooper!
        </div>
    </div>
De body
</div>

For a visual explanation of what is going on, see http://jsfiddle.net/M5sMx/38/ as you scroll down, you will see what the "tester" object is doing.

teynon
  • 7,540
  • 10
  • 63
  • 106
  • Yes, that's what I need. Ok, now I have to figure out how to apply this to my situation. – J82 Mar 22 '14 at 01:09
  • As a beginner of JavaScript, I am trying to decipher your code. I have figured out some stuff but not all. For example, what is the purpose of `tester` and `testPosition`? I'm trying to simplify your code even further and add comments to help myself somehow get this working with my setup haha: http://jsfiddle.net/M5sMx/32/ – J82 Mar 22 '14 at 12:23
  • I added comments to the code above with your comments as well. If you really want to understand what is going on, change the opacity to 0.5. There are other ways of doing this, but this is one quick way. http://jsfiddle.net/M5sMx/34/ for 0.5 opacity (scroll down). – teynon Mar 22 '14 at 13:45