Position: Fixed not working with scrollIntoView()

Question

I have a search bar at the top of a navigable table, which I want the position to be fixed so it is still visible while scrolling. The table puts itself over the search bar. I use scrollIntoView() in the table navigation script to move the view to the selected row. Here is a jsfiddle with the problem occuring: 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;
}

<!-- begin snippet: js hide: false console: true babel: false -->

I also tried this fix Using scrollIntoView with a fixed position header

But it's still not working. In this case the selected element is a table row, so I have :

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

so I wrote

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

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

window.scroll(0, scrolledY - yourHeight); 

}

I didn't put the navigation script but it works well (at the beginning the var selectedRow value is 0)

score 1 · Answer 1 · answered May 05 '18 at 21:50

1

You could play around with the top, left, and right (I exclude bottom since you mentioned that you want the search bar at the top) properties of position: fixed; for instance:

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

answered May 05 '18 at 21:50

MaestroNate

33
6

1

Thank you, the search bar is fixed now, but the table puts itself over the search bar, what would be the simpliest solution to fix this please ? – Nas May 05 '18 at 22:18
@Nas You need to indicate which elements should be in front or behind of other elements. For this you simply need to adjust the [z-index](https://www.w3schools.com/cssref/pr_pos_z-index.asp) – MaestroNate May 06 '18 at 15:59
Here's an old post with that exact issue: https://stackoverflow.com/questions/13614112/using-scrollintoview-with-a-fixed-position-header – MaestroNate May 06 '18 at 16:26
sorry I misexplained I said something completely false in the deleted comment it's not that the z-index is ignored but my table content is showed in the background of the search bar. Thank you for your help! – Nas May 06 '18 at 16:27
@Nas No worries. Did you see check out the link that I shared a few minutes ago? – MaestroNate May 06 '18 at 16:30
I tried the fix in the link you shared me but I don't know why it's not working for me, I added what I've done in my code in the post. Any idea why it is not working ?? – Nas May 06 '18 at 17:03

score 0 · Answer 2 · edited May 05 '18 at 22:34

0

Add a left and top position to the #mySearch. For example:

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

edited May 05 '18 at 22:34

pushkin

9,575
15
51
95

answered May 05 '18 at 21:53

stephen aidoo

1

Thank you, the search bar is fixed now, but the table puts itself over the search bar, how can I fix this please ? – Nas May 05 '18 at 22:15

score 0 · Answer 3 · answered May 05 '18 at 22:32

Height of the body is for you can scroll down Use the Fix to fix position of your search bar, then give your body content a margin-top. You can set value of the margin-top to show all infor you want to show in body.

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>

thank you for your help but it's not working in my case, here is a jsfiddle which exactly shows my problem: — Nas, May 06 '18 at 00:38

Position: Fixed not working with scrollIntoView()

3 Answers3