Question

我有一个基本的自助联系表格。

<div class="container">
  <form>
    <div class="form-group">
      <label for="name">Name:</label>
      <input type="name" class="form-control" id="name" name="name">
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" name="email">
    </div>
    <div class="form-group">
      <label for="phone">Phone :</label>
      <input type="number" class="form-control" id="phone" name="phone">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

我在页面上有很长的内容。

打开当前页面时，联系表单显示在前面。但是当页面滚动超过100px时，我希望将联系表单隐藏或折叠到右侧。
页面滚动超过100px后，是否可以隐藏联系表单？如果是，请告诉我如何？
我不知道怎么做。

Answer 1

查看提供给您Scroll_on_click的链接，希望这对您有所帮助。

<div id="body">
<h2>Slide toggle from right to left and left to right.</h2>
    <hr/>
    <p>
        <select class="mySelect">
            <option value="right">Right</option>
            <option value="left">Left</option>            
            <option value="up">Up</option>
            <option value="down">Down</option>
        </select>
        <button id="button" class="animate-btn">Run Effect</button>
    </p>
    <div id="myDiv">
        <div class="container">
            <form>
            <div class="form-group">
              <label for="name">Name:</label>
              <input type="name" class="form-control" id="name" name="name">
            </div>
            <div class="form-group">
              <label for="email">Email:</label>
              <input type="email" class="form-control" id="email" name="email">
            </div>
            <div class="form-group">
              <label for="phone">Phone :</label>
              <input type="number" class="form-control" id="phone" name="phone">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
</div>

Answer 2

您可以使用scroll()事件来检测滚动。以下是滚动事件的示例代码段。

$( window ).scroll(function() {
    $('.container').hide();
});

用户滚动到一定高度时

。

$(window).on("scroll", function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        // when scroll to bottom of the page
        $('.container').show();
    }
});

隐藏/拼写“联系表单”页面滚动

2 个答案: