JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)

下面是详细的攻略：

JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)

1. 引入 jQuery 库

在 HTML 页面中引入 jQuery 库，可以通过以下代码实现：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. 编写 HTML 模板

在需要实现停靠效果的搜索框上方或下方，添加一个占位的空 DIV 元素，例如：

<div id="placeholder"></div>

<div id="searchBox">
  <input type="text" name="search" placeholder="搜索...">
  <button>搜索</button>
</div>

3. 编写 CSS 样式

为了实现停靠效果，需要将搜索框设为 fixed 定位，并设置相应的样式，例如：

#searchBox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 50px;
  width: 400px;
  background-color: white;
  border: 1px solid grey;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  box-sizing: border-box;
}

4. 编写 JavaScript 代码

首先，需要获取 placeholder 元素和搜索框元素，并计算它们之间的相对位置：

var placeholder = $('#placeholder');
var searchBox = $('#searchBox');
var distance = placeholder.offset().top - searchBox.outerHeight();

然后，在窗口进行滚动的时候，检查滚动的距离是否大于等于相对位置的值，如果是，则将搜索框设置为 fixed 定位，否则将其设置为 relative 定位。代码如下：

$(window).scroll(function () {
  if ($(this).scrollTop() >= distance) {
    searchBox.css({
      position: 'fixed',
      top: 0
    });
  } else {
    searchBox.css({
      position: 'relative',
      top: ''
    });
  }
});

5. 示例说明

示例一

如果搜索框和 placeholder 元素在同一个区块内，可以直接通过计算元素的相对位置实现停靠效果。例如：

<div class="container">
  <div id="searchBox">
    <input type="text" name="search" placeholder="搜索...">
    <button>搜索</button>
  </div>
  <div id="placeholder"></div>
</div>

.container {
  height: 1000px;
  background-color: yellow;
}

var placeholder = $('#placeholder');
var searchBox = $('#searchBox');
var distance = placeholder.offset().top - searchBox.outerHeight();

$(window).scroll(function () {
  if ($(this).scrollTop() >= distance) {
    searchBox.css({
      position: 'fixed',
      top: 0
    });
  } else {
    searchBox.css({
      position: 'relative',
      top: ''
    });
  }
});

示例二

如果搜索框和 placeholder 元素不在同一个区块内，可以通过动态计算元素的相对位置实现。例如：

<div class="container">
  <div id="placeholder"></div>
</div>
<div id="searchBox">
  <input type="text" name="search" placeholder="搜索...">
  <button>搜索</button>
</div>

.container {
  height: 1000px;
  background-color: yellow;
}

var placeholder = $('#placeholder');
var searchBox = $('#searchBox');
var distance = placeholder.offset().top - searchBox.outerHeight();

$(window).scroll(function () {
  var currentTop = placeholder.offset().top - searchBox.outerHeight();

  if ($(this).scrollTop() >= currentTop) {
    searchBox.css({
      position: 'fixed',
      top: 0
    });
  } else {
    searchBox.css({
      position: 'relative',
      top: ''
    });
  }
});

通过这两个示例，可以实现不同场景下的搜索框停靠效果。