css 在Scroll上隐藏导航栏

Posted 2021-05-13

componentDidMount() {
    document.addEventListener('click', this.handleClickOutside.bind(this), true);
    var scrollpos = window.scrollY;
    var header = document.getElementById("header");

    function add_class_on_scroll() {
        header.classList.add("nav-up");
    }

    function remove_class_on_scroll() {
        header.classList.remove("nav-up");
    }

    window.addEventListener('scroll', function(){ 
        //Here you forgot to update the value
        scrollpos = window.scrollY;

        if(scrollpos > 10){
            add_class_on_scroll();
        }
        else {
            remove_class_on_scroll();
        }
        console.log(scrollpos);
    });
  }
  
  //https://stackoverflow.com/questions/32856341/pure-js-add-and-remove-toggle-class-after-scrolling-x-amount

.header.nav-up {
    top: -64px;
}