How to prevent JavaScript animation occurring strange vibration [duplicate]

Question

The code below is what I currently trying to make. As the result you can see just a bunch of buttons, I want to hide the buttons while the user is scrolling. Cause I can't insert code with code snippet :( so I just paste here:

$(function() {
  $(window).on('scroll', function() {
    $('ul.side-sticky-nav').addClass('hide-side-sticky-nav');
    setTimeout(function() {
      $('ul.side-sticky-nav').removeClass('hide-side-sticky-nav');
    }, 150);
  });
});

ul.side-sticky-nav {
  list-style-type: none;
  padding: 0;
  width: 50px;
  margin: 8px;
  position: fixed;
  right: 0;
  bottom: 10%;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

ul.side-sticky-nav li {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
  margin: 8px 0;
  background: blue;
}

.hide-side-sticky-nav {
  right: -40px!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 2000px; background: gray;">
  <ul class="side-sticky-nav">
    <li>
      <a></a>
    </li>
    <li>
      <a></a>
    </li>
  </ul>
</div>

What we should pay attention when using animation with js? Thank you!

in my opinion your code is working fine. I did not see any vibration. — s.kuznetsov
– s.kuznetsov, Commented Jul 31, 2020 at 4:07

Chaska · Accepted Answer · 2020-07-31 04:13:29Z

This is an easier way to detect stop scrolling event for your case.

$(function() {

  var st = $(window).scrollTop();
  setInterval(function() {
    if (st != $(window).scrollTop()) {
      $('ul.side-sticky-nav').addClass('hide-side-sticky-nav');
    } else {
      $('ul.side-sticky-nav').removeClass('hide-side-sticky-nav');
    }
    st = $(window).scrollTop();
  } ,300);

});

ul.side-sticky-nav {
  list-style-type: none;
  padding: 0;
  width: 50px;
  margin: 8px;
  position: fixed;
  right: 0;
  bottom: 10%;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

ul.side-sticky-nav li {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
  margin: 8px 0;
  background: blue;
}

.hide-side-sticky-nav {
  right: -40px!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 2000px; background: gray;">
  <ul class="side-sticky-nav">
    <li>
      <a></a>
    </li>
    <li>
      <a></a>
    </li>
  </ul>
</div>

kliank · Accepted Answer · 2020-07-31 04:36:49Z

Maybe you could apply debounce to it with at_begin in true

$(function() {
 function() toggleNav{
    const nav = $('ul.side-sticky-nav')
    if (nav.hasClass('hide-side-sticky-nav') {
      $('ul.side-sticky-nav').removeClass('hide-side-sticky-nav');
    }
    else {
      $('ul.side-sticky-nav').addClass('hide-side-sticky-nav');
    }
  }

  $(window).on('scroll', debounce(250, true, toggleNav));
});

this will hide the nav right after user start to scroll and won't show it again until 250 ms after it stops scrolling

You could use (at least) one of this to have the debounce function:

http://benalman.com/projects/jquery-throttle-debounce-plugin/ (not maintained)
https://github.com/jashkenas/underscore/commit/9e3e067f5025dbe5e93ed784f93b233882ca0ffe (underscore.js)
Lodash https://lodash.com/docs#debounce (recommended )

Their api is nearly the same

Collectives™ on Stack Overflow

How to prevent JavaScript animation occurring strange vibration [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related