Question

我正在设置一个浮动操作按钮，就像在谷歌的新材料设计中一样。这是我现在正在使用的jQuery：

$(document).ready(function () {
    var doc = $(document).height();
    var height = $(window).height();
    var offset = height - 20 ;
    console.log(doc);
    console.log(height);
    console.log(offset);
    $("#floating_nav_container").css("top",""+ offset +"px");   
});

我希望能够检测视口的高度，并让我的动作按钮显示在底部上方20px。

我的“floating_nav_container”是bootstrap“col-md-6”父div中的绝对定位div，我为900px的测试目的设置了一个固定的高度。

有时$(document).height()获得正确的900，有时则没有; $(window).height始终与文档1相同。

我的文档类型是：

<!DOCTYPE html>

我在这里阅读的

是这两种方法返回相同值时的常用修复方法。

编辑：我正在尝试在3列布局中完成此操作。 “floating_nav_container”仅适用于中间列。将其CSS设置为底部为20px的固定位置不起作用，因为视操作按钮可能会在第三列或列外显示视口大小。

如果“floating_nav_container”被设置为固定，其代码设置为中间列的子代，则其行为与在DOM顶部设置的行为相同。

我选择将它绝对定位在中间列中，因为无论浏览器如何重新调整大小，它都会保留在父容器中。问题是当页面超出视口高度时按钮消失。

我希望找到一种计算高度的方法，并让它动态地确定视口底部对任何设备的偏移量。

Answer 1

将#floating_nav_container移到父div之外，并使用@ floribon的解决方案。此外，如果您希望它始终是从底部20px，即使滚动时将位置设置为固定。

#floating_nav_container{
  position:fixed;
  bottom:20px;
}

我在这里为你添加了一个小提琴https://jsfiddle.net/9v9u8ybp/

Answer 2

我建议您在CSS中完全使用它来防止任何错误：

#floating_nav_container {
  position: absolute;
  bottom: 20px;
}

Answer 3

对于视口感知元素的定位，使用CSS代替jQuery或js，如下所示：

#floating_nav_container {
    position: fixed;
    bottom: 20px;
}

Answer 4

我找到了一个最适合我的解决方案，使用了一些建议的解决方案。如果其他人在将来遇到类似的问题，我所做的一切都是让它最简单的工作。

我移动了＃34;＃floating_nav_container＆＃34;在中间的栏目之外，所以它不是任何孩子。

＆＃34;＃floating_nav_container＆＃34;上的CSS是这样的：

#floating_nav_container {
position:fixed;
bottom:20px;
right:40px;
z-index:10;
}

这使其适合移动使用，但一旦设计缩放到桌面大小，就不会将按钮保留在中间列中。

为了确保按钮始终位于中间列中，我使用了媒体查询来设置它＆＃34;对＆＃34;到31％。

@media (min-width: 992px) {
  #floating_nav_container {
    right:31%;
  }
}

我的布局是用bootstrap制作的，第3列是＆＃34; col-md-3＆＃34;它始终是视口可用宽度的25％。通过在＆＃34;＃floating_nav_container＆＃34;上设置我的权利。至31％我已经使它能够随着设计的扩展而始终隐藏在中间柱内。

一旦删除了右列并且只剩下中间列，那么＆＃34;＃floating_nav_container＆＃34;的默认值为css。踢出并处理显示。

这完全消除了我使用jQuery的需要。

$（document）.height和$（window）.height都返回相同的值 - 正在使用的doctype

4 个答案: