导航栏是否在页面上的特定位置向下滑动？

Question

大家好，我一直在学习js和HTML，而且我一直在努力学习。

我有一个导航栏，我想在页面的某个部分触发（通过滚动）。 现在，我所拥有的代码迫使导航栏保持不断循环的淡入淡出。

这是我的Javascript：

  $('.navbarclass').hide(0);

  $(window).on('scroll', function() {
        var y_scroll_pos = window.pageYOffset;
        var scroll_pos_test = 150;        

        if(y_scroll_pos > scroll_pos_test) {
          $('.navbarclass').slideToggle();
        }

    });

基本上，我希望导航栏在150处触发（确实如此），但它会不断地循环进行拨入和拨出。

Answer 1

将.slideToggle()更改为.slideDown()

Answer 2

它在切换中循环，因为滚动150px后条件始终为true。 因此，每个大于150px的滚动都将使导航栏slideDown或slideUp。

我会以这种方式做条件的。

if (y_scroll_pos > scroll_pos_test) {
    $('.navbarclass').slideDown();
} else {
    $('.navbarclass').slideUp();
}

当滚动大于150px时，它将向下滑动导航栏，而当滚动小于或等于150px时，将滑动向上导航条。

如果您只想在滚动大于150px时显示它，而无需执行其他任何操作，则只需删除else块。