如何根据文档高度隐藏角度div?

时间:2017-11-14 18:55:08

标签: javascript jquery angularjs

请原谅我,如果这是在其他地方......

我进入了一个被遗弃中途的项目。我以前没有工作过角,需要隐藏/显示"回到顶部"按钮取决于文档是否高于视口。我已经尝试了几种不同的方法,无法获得任何成功的工作。这是我最近的尝试:

$(document).ready(function() {

    if ($(document).height() > $(window).height()) {
        console.log("document height is greater");
        $('#arrowUp').show();
    } else {
        console.log("window height is lesser");
        $('#arrowUp').show();
    }
});

提前致谢

2 个答案:

答案 0 :(得分:1)

为什么不尝试这样的事情:

<div id="arrowUp" ng-show="$(document).height() > $(window).height()" >
  /\
</div>

我还会将jQuery的用法视为获取这些值的简单任务。

答案 1 :(得分:0)

首先,我强烈反对Angular和jQuery的混合 - 两者都是DOM操作框架,当你试图解决各种问题时,它们会互相踩到你们,导致你无休止的头痛。

这是&#34; Angular&#34;的一个非常人为的例子。根据高度显示或隐藏div的方法。您应该能够根据窗口和文档高度的差异来调整它以满足您显示箭头的需要(很难在内置片段运行器中证明这一点)。

&#13;
&#13;
angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.maxHeight = 1200;
    $scope.windowOuterHeight = window.outerHeight;
    $scope.documentHeight = document.documentElement.clientHeight;
  });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
    Enter max height: <input type="text" ng-model="maxHeight">
  </div>
  <div ng-show="windowOuterHeight < maxHeight">
    Window Outer Height is {{windowOuterHeight}}px <br/><br/>
    Document Height is {{documentHeight}}px
  </div>
</div>
&#13;
&#13;
&#13;