There is a long timeline, and it is interested in a function that, when scrolling up or down, highlighted the element of the selected position. Closer to the visibility in this form, so that, depending on the position in the header, the category of the selected item would be indicated.

header { padding: 1em; width: 100%; background: rgb(102,102,102); position: fixed; } select { border: 1px solid rgba(0,0,0,0.2); background: rgba(0,0,0,0.1); color: rgb(255,255,255); padding: .5em 3.5em .5em 1em; -webkit-border-radius: .3em; -moz-border-radius: .3em; border-radius: .3em; } table { position: absolute; width: 98%; padding: .1em; margin-top: 4em; z-index: -1; } th { padding: .5em; background: rgba(206,206,206,0.9); } td { width: 100%; padding: 20em 2em; background: rgba(206,206,206,0.3); } 
 <header> <select> <option>Лето</option> <option>Осень</option> <option>Зима</option> <option>Весна</option> </select> </header> <table><tr> <th>Лето</th> </tr> <tr> <td>Июнь</td> </tr> <tr> <td>Июль</td> </tr> <tr> <td>Август</td> </tr> <tr> <th>Осень</th> </tr> <tr> <td>Сентябрь</td> </tr> <tr> <td>Октябрь</td> </tr> <tr> <td>Ноябрь</td> </tr> <tr> <th>Зима</th> </tr> <tr> <td>Декабрь</td> </tr> <tr> <td>Январь</td> </tr> <tr> <td>Февраль</td> </tr> <tr> <th>Весна</th> </tr> <tr> <td>Март</td> </tr> <tr> <td>Апрель</td> </tr> <tr> <td>Май</td> </tr></table>

  • without javascript on pure html, this is not feasible to me - perfect
  • Well, and in what direction to dig, how can this be correctly called? - Kalwin
  • ... fixed the tags - perfect
  • but hardly anyone will help you, the work for the author is not done here - perfect
  • Yes, I at least sources to know how to do it. I do not need that would give the finished. - Kalwin

1 answer 1

See the window scroll event - window.onscroll and the window.pageYOffset property. For more information, for example, here: https://learn.javascript.ru/onscroll

Coordinates of the object: for DOM elements, you can find out their position on the page through the getBoundingClientRect () function, it returns the dimensions of the element and the distance from the edges of the viewport.

Accordingly, you need to check the window.pageYOffset and the indent of each of the DOM objects in the scrolling event handler. If these elements do not change on the page, you can write their position in advance into the array, and check the event in the event, but in this case you need to recalculate the list when the window is resized ( window.onresize ).

  • Thank you for your reply. - Kalwin