位置：修复了不能使用 scrollIntoView()答案

【问题标题】：Position: Fixed not working with scrollIntoView()位置：修复了不能使用 scrollIntoView()
【发布时间】：2018-10-16 01:55:15
【问题描述】：

我在可导航表的顶部有一个搜索栏，我希望它的位置是固定的，以便在滚动时仍然可见。该表将自身置于搜索栏上。我在表格导航脚本中使用 scrollIntoView() 将视图移动到选定的行。这是一个出现问题的 jsfiddle：https://jsfiddle.net/5umztjty/

#screen {
    position: relative;
    z-index: 110;
    width: 255px;
    height: 140px;
    
    overflow-y: hidden;
}

#pokemons-list {
    padding-top: 3px;
    border-spacing: 0px;
    align-content: center;
    position: absolute;
    width: 100%;
}

#mySearch {
    position: fixed;
}

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

我也试过这个修复Using scrollIntoView with a fixed position header

但它仍然无法正常工作。在这种情况下，所选元素是表格行，所以我有：

var rows = document.getElementById("myTable").children[1].children; 
var selectedRow
var yourHeight = '20px';

所以我写了

// scroll to your element 
rows[selectedRow].scrollIntoView(true); 

// now account for fixed header 
var scrolledY = window.scrollY; if(scrolledY) { 

window.scroll(0, scrolledY - yourHeight); 

}

我没有放导航脚本但是效果很好（一开始var selectedRow 的值为0）

【问题讨论】：

标签： javascript html css

【解决方案1】：

将left 和top 位置添加到#mySearch。例如：

#mySearch {
    position: fixed;
    top: 3px;
    left: 4px;
}

【讨论】：

谢谢，搜索栏现在已经修复了，但是表格会自动覆盖搜索栏，请问我该如何解决这个问题？

【解决方案2】：

body的高度是为了你可以向下滚动使用 Fix 来固定您的搜索栏的位置，然后给您的正文内容一个 margin-top。您可以设置 margin-top 的值以显示您想要在正文中显示的所有信息。

body{
    height: 200Vh;
}

#screen {
    width: 100vw;
    overflow-y: hidden;
}

#pokemons-list {
 margin-top: 4vh;
}

#mySearch {
    position: fixed;
    overflow: hidden;
}

<!DOCTYPE html>
<html>

  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="test.css">
  </head>

  <body>
    <div id="screen">

      <input id='mySearch' onkeyup='searchPokemon()' type='text' autocomplete="off">

      <table id="pokemons-list">

        <thead>
          <tr>
            <th>NO</th>
            <th>Nom</th>
          </tr>
        </thead>

        <tbody>
          <!--auto-generated-->
          <tr>
            <td>1</td>
            <td>Name1</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Name2</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Name3</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Name4</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Name5</td>
          </tr>
        </tbody>
      </table>

    </div>

</html>

【讨论】：

感谢您的帮助，但在我的情况下它不起作用，这是一个 jsfiddle，它准确地显示了我的问题：

【解决方案3】：

例如，您可以使用 position: fixed; 的顶部、左侧和右侧（我排除底部，因为您提到您希望搜索栏位于顶部）属性：

#mySearch { position: fixed; top: 0; }

【讨论】：

谢谢，搜索栏现在已修复，但表格将自己置于搜索栏上方，请问解决此问题的最简单解决方案是什么？
@Nas 你需要指明哪些元素应该在其他元素的前面或后面。为此，您只需调整z-index
这是一篇关于该问题的旧帖子：stackoverflow.com/questions/13614112/…
对不起，我解释错了，我在已删除的评论中说了一些完全错误的话，并不是 z-index 被忽略，而是我的表格内容显示在搜索栏的背景中。感谢您的帮助！
@Nas 不用担心。你看到我几分钟前分享的链接了吗？