Question

我正在使用本教程http://jqueryfordesigners.com/fixed-floating-elements/在用户滚动时使我的div移动到页面。它就像一个魅力，但直到你到达我的网络的底部和div仍然固定位置，仍然从他的父母div移动到页脚。 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;
}

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

对不起我的英文，感谢您的回答：）

Answer 1

我在Cart Page上使用css属性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)');
    }
  });

});

<强>更新

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

Answer 2

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

如果您使用的是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

在页脚之前停止使用页面移动div

2 个答案: