Question

我想使用jQuery或其他一些框架来获取屏幕的底部，这样当智能横幅显示在移动应用程序上时，无论横幅如何，它都会修改屏幕以适应底部。有没有一种简单的方法来实现这一目标？

Answer 1

如果我理解你的问题，你愿意拥有容器高度和视口一样多。让我们通过一个例子来做这件事。假设您有一个主div container围绕其他所有内容，p代码显示container的当前大小以用于显示目的，并button显示和隐藏banner：

<强> HTML

<div class="container">
    Screen size is <p></p>
    <button type="button">push to add banner</button>
</div>

要根据窗口的高度更改container的高度，我们可以在jQuery中执行此操作：

$(document).ready(function() {

  heightResize($(".container"));

  $(window).resize(function() {
    heightResize($(".container"));
  });
});

function heightResize(element) {
  element.height($(window).height()-20);
  $("p").text(element.height());
}

然后，代码显示/隐藏横幅并相应地更改container的高度：

$("button").click(function() {

  if ($(".container").find(".banner").length != 0) {
     $(".container").find(".banner").remove();
     heightResize($(".container"));
  } else {
     $(".container").append("<div class='banner'>this is your dynamically created banner</div>");
     $(".container").height($(".container").height()+$(".banner").height());
  }

});

动态添加banner时，container的高度将增加window的高度，高度为banner的高度。

查看CODEPEN

中的工作示例

获得屏幕位置的底部

1 个答案: