How to replace one element with another when scrolling?

  • 0
    There are 2 divas

    <div id="elem1">Пики точеные</div>
    <div id="elem2">Не точеные</div>

    The div with elem1 is initially visible, while elem2 is hidden. When the user scrolls the page, elem1 crawls up and disappears, instead of it, elem2 gets out, which is fixed-top.

    How can this be done? In fact, I want to replace the large wanderer's hat with a more compact one when scrolling.
    JavaScript Anonymous, Mar 5, 2020

  • 2 Answers
  • 0
    Ronan Dennis

  • 0
    JQuerry function

    $ (document) .ready (function () {

    $ (window) .scroll (function () {

    if ($ (this) .scrollTop () & gt; 55) {

    # elem1 - display: none;

    # elem2 - display: block;


    else {

    On the contrary




    Here I do not know how to insert CSS code into JS, let someone tell me, but the idea is this. Instead of 55, insert another number (the difference between the height of the large and compact menu in pixels)

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!