滚动div中绝对定位的div跳跃

我知道有类似的问题，但到目前为止我还没有办法解决我的问题。 这个jsfiddle反映了我的要求。

为了解释，div中有几个垂直堆叠的view-div（溢出）。 每个view-div都有一个label-div，应该显示在左上角。 如果view-divs水平滚动，标签应保持在视图中。 当视图垂直滚动时，向上消失的视图应该将其标签向下推，直到它完全消失。

另一个不在这个jsfiddle示例中的要求是view-divs可以垂直resize（我准备好了代码，但我认为这个例子太大了）。

现在，我实现它的方式不起作用。 标签移动不够顺畅。 我真的希望它们粘在容器div的边缘。 此外，当您快速向上滚动时，标签不会落在左上角。

其他一些SO问题/答案表明我应该在固定和绝对定位之间切换，具体取决于滚动方向。 但我认为这不会起作用，因为用户可以同时水平和垂直拖动滚动背景。

我希望$labels.css({"left" : scrLeft})方法可以简单地工作，这似乎是合理的。 :-)我试着简化我的例子，但是那里的运动太过于激动。

有任何想法吗？ 谢谢！！

Answer 1

概念validation解决方案

这是一个简洁的小问题，真正迫使您思考控制布局几何的各种重叠坐标系。

这是jQuery ：

 //handle scrolling var $labels = $(".label"); $("#container").on("scroll", function () { //horizontal var scrLeft = $(this).scrollLeft(); $labels.css({ "left": scrLeft }); //vertical var scrollTop = $("#container").scrollTop(); var containerTop = $('#container').position().top; var innerTop = $('#inner_container').position().top; var views = $("#inner_container .view"); var diff = 0; var heightAggr = 0; if (scrollTop == 0) { views.children(".label").css({ "top": 0 }); } views.children(".label").removeClass('highlight'); for (var i = 0; i < views.length; i += 1) { var view = $(views[i]) var viewHeight = view.outerHeight(); var viewTop = view.offset().top; /* This is the key parameter to test... getting this relationship right took a lot of effort, everything else was relatively easy... */ diff = scrollTop - viewTop + innerTop; if (diff>0) { view.children(".label").addClass('highlight'); var labelOffset = scrollTop - heightAggr; var maxOffset = view.height() - view.children(".label").outerHeight(); /* The following pins the label to the bottom of the view when view is about to scroll off the screen... */ var labelPosition = Math.min(labelOffset,maxOffset); view.children(".label").css({ "top": labelPosition }); } else { view.children(".label").css({ /* Clean up when */ "top": 0 /* reverse scrolling ... */ }); } /* will allow .view with variable heights... */ heightAggr += viewHeight; } }); 

演示小提琴位于： http ： //jsfiddle.net/audetwebdesign/HRnCf/

浏览器免责声明

我只在Firefox中测试过这个…

Answer 2

你应该使用固定的位置：

http://jsfiddle.net/mHWJH/1/

 var $label1 = $("#label1"), offsetTop = $label1.offset().top, offsetLeft = $label1.offset().left, $label2 = $("#label2"), offsetTop2 = $label2.offset().top, offsetLeft2 = $label2.offset().left; $("#container").on("scroll", function() { var scrLeft = $(this).scrollLeft(); $label1.css({ position:'fixed', top:offsetTop, left:offsetLeft }); $label2.css({ position:'fixed', top:offsetTop2, left:offsetLeft2 }); });