在渲染后将元素更改为粘性（使搜索输入粘性）答案

【问题标题】：Change an element to be sticky AFTER it render (making search input sticky)在渲染后将元素更改为粘性（使搜索输入粘性）
【发布时间】：2021-08-23 17:39:00
【问题描述】：

我正在使用 bootstrap-table，这意味着它会呈现表本身。我正在尝试使搜索输入具有粘性，因此即使用户滚动他仍然可以使用快速搜索功能而无需向上滚动。

示例代码可以在这里找到： https://live.bootstrap-table.com/example/options/table-search.html

代码本身是这样的：

<table
  id="table"
  data-toggle="table"
  data-search="true"
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

我已经尝试过：

document.querySelector('body > div.bootstrap-table.bootstrap4 > div.fixed-table-toolbar > div').style.position = "sticky"

document.querySelector('body > div.bootstrap-table.bootstrap4 > div.fixed-table-toolbar > div').style.top = "0"

但它似乎不起作用。

【问题讨论】：

标签： javascript html css dom bootstrap-table

【解决方案1】：

我可能用核弹杀死了一只蝴蝶，但由于我找不到“轻松”的方法，我手动克隆了输入并修复了它。然后在原始搜索超出视口时手动检查以隐藏/显示它。并从原件中复制 CSS 以使其看起来像粘住一样。

我是这样做的，此代码用于引导表搜索，但您可以将其用于任何输入，我尝试离开 cmets，以便您查看需要编辑的位置。

HTML：

将其添加到<body> 标记内的任何位置

<div id="stickySeachDiv" class="position-fixed top-0 end-0" style="z-index: 100;">
<!-- sticky search will be added by script into this div -->
</div>

CSS：

根据填充复制您的搜索属性，以创建像粘性一样的效果。隐藏在启动时会被隐藏，因为在我的情况下，原始输入出现在顶部

#stickySeachDiv {
    padding-right: 2%;
    display: none;
}

Javascript：

我正在使用自动提交搜索，您可以将其注释掉。不要忘记也删除侦听器。另外，我从 pre-bs 调用了 CreateStickySearch...你也可以修改它，window.onload 也应该可以工作。

$("#gamesTable").one("pre-body.bs.table", createStickySearch);
function createStickySearch() {
  // get hold on the input and clone it
  const OriginalSearch = document.querySelector(".fixed-table-toolbar .search input");
  const stickySearch = OriginalSearch.cloneNode(true);
  stickySearch.addEventListener("keyup", autoSearchHandler);
  stickySearch.addEventListener("search", handleStickySearch);
  document.querySelector("#stickySeachDiv").appendChild(stickySearch);
  // jQuery Listeners, change if you don't use jquery
  $(window).on("DOMContentLoaded load resize scroll", stickySearchListener);
}

let time;
function autoSearchHandler() {
  // automaticly submit the search after given time
  clearTimeout(time);
  time = setTimeout(() => submitStickySearch(this.value), 500);
}

function handleStickySearch() {
  submitStickySearch(this.value);
}

function submitStickySearch(text) {
  $("#table").bootstrapTable("refreshOptions", {
    searchText: text
  });
}

function revealStickySearch() {
  const originalSearch = document.querySelector(".fixed-table-toolbar .search input");
  const stickySearchDiv = document.querySelector("#stickySeachDiv");
  const stickySearchInput = stickySearchDiv.querySelector('input');
  stickySearchDiv.style.display = "block";
  stickySearchInput.value = originalSearch.value;
}

function hideStickySearch() {
  document.querySelector("#stickySeachDiv").style.display = "none";
}


// Code to see when it should activate, credit to https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport

function isElementInViewport(el) {
  // Special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }

  var rect = el.getBoundingClientRect();

  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <=
      (window.innerHeight ||
        document.documentElement.clientHeight) /* or $(window).height() */ &&
    rect.right <=
      (window.innerWidth ||
        document.documentElement.clientWidth) /* or $(window).width() */
  );
}

let old_visible = true;
function onVisibilityChange(el, onvisible, onNotvisible) {
    var visible = isElementInViewport(el);
    if(visible !== old_visible) {
      old_visible = visible;
      visible ? onvisible() : onNotvisible();
    }
}


function stickySearchListener() {
  const originalSearch = document.querySelector(".fixed-table-toolbar .search input");
  onVisibilityChange(originalSearch, hideStickySearch, revealStickySearch);
}

这不是最漂亮的解决方案，但它有效，如果有人找到更优雅的解决方案，我将编辑我的解决方案。

祝大家好运

【讨论】：