如何对大型表单使用浮动保存按钮，并隐藏当实际保存按钮是可见的angularjs时，其位置不仅仅是页面的底部

Question

嗨，我想在我的div中使用浮动保存按钮

.fw_circle{
        background-color: #53beb6;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        text-align: center;
        font-size: 20px;
        padding: 13px;
        color: white;
        z-index: 100;
    }

<div class="div1">
  <!-- Floating save button -->
  <div class="fw_circle">
       <i class="fa fa-floppy-o" aria-hidden="true"></i>
  </div>
  
  <div class="form-group">
      <label>Name:</label>
      <input type="text" ng-model="Name" class="form-control"                      maxlength="200" required/>
  </div>
   <div class="form-group">
      <label>Name2:</label>
      <input type="text" ng-model="Name2" class="form-control"                      maxlength="200" required/>
  </div>
   <div class="form-group">
      <label>Name3:</label>
      <input type="text" ng-model="Name3" class="form-control"                      maxlength="200" required/>
  </div>
   <div class="form-group">
      <label>Name4:</label>
      <input type="text" ng-model="Name4" class="form-control"                      maxlength="200" required/>
  </div>
  <!-- And so many other input fields-->
</div>

<div class="div2">
<!--Don't want that float button to be shown in this div as it has only a save button -->
<button class="btn">Save</button>
</div>

我想浮点按钮应该在上面的div（即div1）中可见，输入字段为

这样用户可以随时保存表单，无需滚动到底部以保存表单。但是当他滚动到底部然后他可以看到另一个div中的保存按钮（即div2）时，在这种情况下，浮动按钮不应该是可见的。 实际的“保存”按钮并不完全位于页面底部

但即使保存按钮可见，浮动按钮也会显示。请提出一些方法来实现这一目标。

Answer 1

你只需要用JavaScript隐藏它：

var button = (find button)

$(div).css('display', 'none')

您可以将其作为一个功能并在方便时触发它。

如果我在您的代码中理解，您可以选择以下按钮：$('.fw_circle')

如果你想根据用户是否到达底部或页面来触发它，你可以使用SO中另一个answer的以下代码片段来触发它：

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
 };