Stop moving div with page before footer

Question

I am using this tutorial http://jqueryfordesigners.com/fixed-floating-elements/ to make my div move with page while user scrolling. It works like a charm, but until you reach bottom of my web and div have still position fixed and still moving from his parental div to footer. JavaScript:

$(document).ready(function () {
  var top = $('#comment').offset().top - parseFloat($('#comment').css('marginTop').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');
    }
  });
});

CSS:

#comment.fixed {
  position: fixed;
  top: 0;
}

Here is my page, so you can look what exactly is my problem: http://testportal.jon.cz/projekt-konfigurator/konfig.html

Sorry for my english and thanks for your answers :)

can you post some code? Don't know how to fix something without seeing how it is built — Adjit, Oct 28 '14 at 14:09

Mohammad Faisal · Accepted Answer · 2014-10-28T15:44:14.710

I've done it once using css property transform on Cart Page. All you need to calculate the offset which you can do dynamically with jquery.

jQuery(window).load(function() {
  offset = jQuery('fieldset').offset().top;  // offset from top of the left content
  fieldset = jQuery('fieldset').outerHeight();  // outer height of the left content
  collaterals = jQuery('.cart-collaterals').outerHeight();  // outer height of the movable right content
  maxTop = fieldset > collaterals ? (fieldset - collaterals) + offset : offset;
  jQuery(window).scroll(function() {
    st = jQuery(window).scrollTop();

    if (st > offset && st < maxTop) {

      jQuery('.cart-collaterals').css('transform', 'translate(0px, ' + (st - offset) + 'px)');
    } else if (st < offset) {
      jQuery('.cart-collaterals').css('transform', 'translate(0px, 0px)');
    } else if (st > maxTop) {
      jQuery('.cart-collaterals').css('transform', 'translate(0px, ' + (maxTop - offset) + 'px)');
    }
  });

});

UPDATE

$(document).ready(function(){
    var top = $('#pravyKonfig').offset().top - parseFloat($('#pravyKonfig').css('marginTop').replace(/auto/, 0));
    var max = $('#odber').offset().top - $('#pravyKonfig').outerHeight();
    $(window).scroll(function(evt){
        var y = $(this).scrollTop();
        $('#pravyKonfig').removeClass('fixed');
        if(y > top && y < max){
            $('#pravyKonfig').css('transform', 'translate(0px, ' + (y - top) + 'px)');
        }else if(y < top){
            $('#pravyKonfig').css('transform', 'translate(0px, 0px)');
        }else if(y > max){
            $('#pravyKonfig').css('transform', 'translate(0px, ' + (max - top) + 'px)');
        }
    });
});

@AdamVýborný: I've added the new code below **update**. Hope that will help you. — Mohammad Faisal, Oct 28 '14 at 15:45
It is not that smooth, like with fixed position, but it works, like a charm! Many thanks for help!!! — Adam Výborný, Oct 29 '14 at 11:01
@AdamVýborný: try removing `$('#pravyKonfig').removeClass('fixed');`. In my case it is smooth. may be some of css causing the problem. — Mohammad Faisal, Oct 29 '14 at 12:31
Doesn't help... It is still blinking a little: http://testportal.jon.cz/projekt-konfigurator/konfig.html — Adam Výborný, Nov 04 '14 at 10:44
I just checked it and the scroll is smooth. you may check for `var top`, it do have a `float` type value. try change it to `int` type. — Mohammad Faisal, Nov 04 '14 at 10:58

score 0 · Answer 2 · edited May 23 '17 at 12:22

you need to change the position from fixed to a new value or to recalculate the bottom value.

if you are using jQuery. Here is an exemple not the best one but from a project I just got. So not my code but working. Still you'll have to adapte for your purpose. But as you can see if the position of the scrollbar excede a certain value the position of the div is changed.

var menuPosYloc = parseInt($("#Header").css("top").substring(0, $("#Header").css("top").indexOf("px")))
        jQuery(window).scroll(function(e){
            if ($(document).scrollTop() > menuPosYloc ) {
                $("#Header").css({"position" : "fixed", "top" : "20px" });
            }
            else {
                $("#Header").css({"position" : "absolute", "top" : "20px; right:0px" });
            }
        });

You may need to see this link for a scrollBottom() function

Opposite of "scrollTop" in jQuery

Stop moving div with page before footer

2 Answers2