Question

嘿所以我试图让我的导航在某个div过去之后动画下来，但它不能正常工作。不知道为什么。滑下来虽然有点马车（有时在它向下滑动之前似乎有一段延迟，有时它会立即向下滑动）。它也不会向上滑动它只是将它自行移除。我做错了什么？

这是我的代码：

$(window).scroll(function () {
    targetScroll = $('#scroll_verder').position().top,
    currentScroll = $('html').scrollTop() || $('body').scrollTop();
if(currentScroll>=targetScroll){
    $('.navbar').addClass('show-menu').animate({ top: '0px' });
}

else {
    $('.navbar').stop();
    $('.navbar').removeClass('show-menu');
    $('.navbar').animate({ top: '-50px' });
}
});

Answer 1

查看您发布的链接上的代码。这应该可以解决问题：

var reachedTarget = false; // Prevent animation collisions with this
var targetScroll = $('#scroll_verder').position().top;
$(window).scroll(function () {
  var currentScroll = $('html').scrollTop() || $('body').scrollTop();
  if ( currentScroll >= targetScroll ) {
    if ( !reachedTarget ) {
      $('.navbar').stop();
      $('.navbar').addClass('show-menu').animate({ top: '0px' });
    }
    reachedTarget = true;
  } else{
    if ( reachedTarget ) {
      $('.navbar').stop();
      $('.navbar').removeClass('show-menu').animate({ top: '-50px' });
    }
    reachedTarget = false;
  }
});

编辑：在CSS中（确保初始位置正确）：

.navbar.show-menu {
  z-index: 999;
  display: block;
  top : -50px;
}

jquery：动画向下导航，而不是向后滑动/正常工作

1 个答案: