Плавность появления меню при скроллинге jQuery

Question

Имеется вот такой код скрывания меню при скроллинге. Он у меня хорошо работает. Но появление меню очень резкое, возможно кто-то подскажет как сделать его появление более плавным и еще хотелось бы сделать небольшую задержку перед исчезновением хотя бы на пару пикселей.

    // BEGIN REMOVE MENU DESCRIPTION DIV IF NO DESCRIPTION ENTERED
    jQuery(document).ready(function() {
    'use strict';
        jQuery('.touchy-menu-item-description:empty').remove();
    });
    // END REMOVE MENU DESCRIPTION DIV IF NO DESCRIPTION ENTERED
    var lastScrollTop; // This Varibale will store the top position
    
    navbar = document.getElementById('touchmi'); // Get The NavBar
    
    window.addEventListener('scroll',function(){
     //on every scroll this funtion will be called
      
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      //This line will get the location on scroll
      
      if(scrollTop > lastScrollTop){ //if it will be greater than the previous
        navbar.style.top='-80px';
        //set the value to the negetive of height of navbar 
      }
      
      else{
        navbar.style.top='auto';
      }
      
      lastScrollTop = scrollTop; //New Position Stored
    });

Answer 1

Удалось сделать как мне хотелось.

Вот пример скрипта:


document.addEventListener('DOMContentLoaded', function() {
    jQuery(document).ready(function() {
        'use strict';
        jQuery('.touchy-menu-item-description:empty').remove();
    });

    var lastScrollTop = 0; 
    var navbar = document.getElementById('touchymi'); 

    if (navbar) { // Ensure navbar exists
        window.addEventListener('scroll', function() {

            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

            if (scrollTop > lastScrollTop) { 
                setTimeout(function() {
                    navbar.style.bottom = '-80px';
                }, 100); 
            } else { 
                setTimeout(function() {
                    navbar.style.bottom = '0';
                }, 100); 
            }

            lastScrollTop = scrollTop; 
        });
    }
});

CSS:

#touchymi {
    transition: bottom 0.3s ease-in-out;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}

БЛОГ НА HUSL

Плавность появления меню при скроллинге jQuery

Ответы (1 шт):