停止在页脚前移动div页面

-1

我正在使用本教程http://jqueryfordesigners.com/fixed-floating-elements/使我的div在用户滚动时随页面移动。它的作用就像一个魅力，但直到你到达我的网页底部，div仍然是固定的位置，并仍然从他的父母div到footer。的JavaScript：停止在页脚前移动div页面

$(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; 
}

这里是我的网页，所以你可以看看究竟是我的问题： http://testportal.jon.cz/projekt-konfigurator/konfig.html

对不起，我的英语，并感谢您的答案：）

来源

2014-10-28 Adam Výborný

你可以发布一些代码？不知道如何修复一些东西，却没有看到它是如何构建的 – Adjit 2014-10-28 14:09:58

没有代码，没有收获... – Shaeldon 2014-10-28 14:10:06

整个代码我用它是在第一个链接 – 2014-10-28 14:12:37

我曾经使用上Cart Pagecss财产transform做到了。您只需计算可使用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)'); 
     } 
    }); 
});

来源

2014-10-28 14:24:51

我绝对没有想法，如何适应我的代码 – 2014-10-28 14:49:27

@AdamVýborný：我已经在** update **下面添加了新代码。希望这会帮助你。 – 2014-10-28 15:45:08

它不是那么光滑，就像固定的位置，但它的作品，就像一个魅力！非常感谢您的帮助！ – 2014-10-29 11:01:26

您需要将位置从固定值更改为新值或重新计算底部值。

如果您使用的是jQuery。这是一个例子，不是最好的例子，而是来自我刚刚得到的一个项目。所以不是我的代码，但工作。你仍然必须适应你的目的。但是你可以看到，如果滚动条的位置超过某个值，div的位置就会改变。

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" }); 
      } 
     });

您可能需要看到此链接为scrollBottom（）函数

Opposite of "scrollTop" in jQuery

来源

2014-10-28 14:13:32 AMS

它根本不移动div。我做错了什么... – 2014-10-28 14:50:20

停止在页脚前移动div页面

回答

相关问题