0

Div in question is the gray box on the right sidebar at this link.

Scrolling along nicely, but it never stops. It should stop right before it hits the "announcements" div.

I am aware there is a very similar question and sort of an answer here but it wasn't checked and I couldn't get it to work.

I'm a newbie at best at jQuery, so I humbly appreciate 2-year-old style answers.

The code triggering the div to scroll is:

$(function () {

  var msie6 = $.browser == 'msie' && $.browser.version < 7;

  if (!msie6) {
    var top = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
      // what the y position of the scroll is
      var y = $(this).scrollTop();

      // whether that's below the form
      if (y >= top) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
      } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
      }
        var newWidth = $('#comment').parent().width();
        $('#comment').width(newWidth);

    });
  }  
});
Community
  • 1
  • 1
Armin
  • 147
  • 1
  • 1
  • 15

1 Answers1

0

Updated Answer

Since we were modifying the offset in the original code, the script lost track of what the orginal offset was so that y would always equal ctop, therefore always fulfilling (y>=ctop) and never triggering the else block). This is solved by defining ctop outside the function as a global variable so that it's original offset value isn't lost when we manipulate #comment's offset while scrolling. I also added an else block to the nested if so that the offset is reset to zero after scrolling to the bottom and then scrolling back up (otherwise the top off #comment sometimes gets cut off). The following code should work. Once again, let me know how it goes and if you have any questions :)

$(document).ready(function() {
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    var abottom = $('#announcements').offset().top - parseFloat($('#announcements').css('margin-top').replace(/auto/, 0));

    // whether that's below the form
    if (y >= ctop) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
        if (y > abottom-$('#comment').height()){
            $('#comment').offset({'top': abottom-$('#comment').height()-y});
        }
        else
        {
            $('#comment').offset({'top': 0 });
        }
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
    var newWidth = $('#comment').parent().width();
    $('#comment').width(newWidth);

    });

Original Answer

So I played around with your site for a bit using Chrome's javascript console to change the binding to the $(window).scroll event, and it looks like the following code should work. What it does is that when the window is scrolled enough to fix the comments div, it also checks to see if the y position of the scrolling is at a place where the announcements div should be at the bottom. If it is, then it offsets the position of the comments div vertically by the difference between the announcement div position + screen size and the current scroll position (which will return a negative value, causing the comments div to go upward). Here is the code that I copied an pasted into the Chrome javascript console (ctrl+shift+j) and appears to be working:

$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    var ctop= $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
    var abottom = $('#announcements').offset().top - parseFloat($('#announcements').css('margin-top').replace(/auto/, 0));

    // whether that's below the form
    if (y >= ctop) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
        if (y > abottom-$('#comment').height()){
            $('#comment').offset({'top': abottom-$('#comment').height()-y});
        }
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
    var newWidth = $('#comment').parent().width();
    $('#comment').width(newWidth);

    });

A few notes:
The alignment of the comments div is weird (at least for me) because the div is too big to fit on the page without scrolling. This is more a design issue than a coding issue.

I changed top to ctop because top is a property of window, so you try to access top in the console, it returns a part of the window object.

Let me know if this works for you :)

asifrc
  • 5,781
  • 2
  • 18
  • 22
  • Almost! It does stop at the correct spot, but now, if you scroll back up the poll box scrolls all the way back to the top of the window. Here is a new page with your code (http://underconsideration.com/brandnew_BUILD/individual_for_so_stop_div_v2.html) – Armin May 24 '13 at 14:58
  • Any chance you can take one more look? @asifrc – Armin May 29 '13 at 14:19
  • Nope. Now it doesn't scroll : ( New page with new code (http://underconsideration.com/brandnew_BUILD/individual_for_so_stop_div_v3.html) – Armin May 29 '13 at 18:57
  • I've put together a ZIP file with the two versions of the page (semi working is V2 / Not working is V3). Other than the font, the HTML files work locally, so you can test directly on them (http://underconsideration.com/brandnew_BUILD/floating_div_for_%20asifrc.zip) – Armin May 29 '13 at 18:59
  • Since it's in the header, it couldn't find #comment's top offset as it didn't exist yet. Wrapping ctop with $(document).ready( function() { ... });` fixed the issue for me.. (before I was doing it through the console so everything was already loaded). Answers updated to reflect this. Let me know if it works.. – asifrc May 29 '13 at 19:43