Question

我将DIV元素渲染为行。此表单的编辑模板很长。我在编辑模板DIV的左上角有一个小的保存和取消按钮。我希望命令按钮可见，当它们滚动到编辑DIV的可见区域之外时向下滚动。

整个东西都包含在一个固定高度的元素中，溢出：auto。

希望这是有道理的。我把小提琴拼凑起来帮助说明我在说什么。 http://jsfiddle.net/fJ55D/3/

jQuery是A-OK。

编辑：扭曲！我的网格在另一个元素中。我认为这不会导致问题，但可能是问题。

Answer 1

这可能会这样做。（取决于您的其他代码）

.save{
    position:fixed;
}

示例：http://jsfiddle.net/fJ55D/1/

Answer 2

您可以监控正在滚动的页面数量，并添加/删除将元素固定到视口的类：

$(window).on('scroll', function () {
    var $save = $('.save'),
        off   = $save.attr('data-offset') || $save.offset().top;

    if ($(this).scrollTop() >= off) {
        $save.not('.fixed').attr('data-offset', $save.offset().top).addClass('fixed');
    } else {
        $save.filter('.fixed').removeClass('fixed');
    }
});

这是一个jsfiddle：http://jsfiddle.net/fJ55D/4/

这是一个jsfiddle分叉你的“fixed-height-scrolling-div”示例：http://jsfiddle.net/fJ55D/5/

在DIV中始终可见保存/取消元素？

2 个答案: