Question

当我点击导航按钮时，页面滚动到顶部，然后菜单应该打开。

此刻我必须点击两次直到它打开。

$("#nav-toggle").click(function() {
$("html, body").animate({ scrollTop: 0 }, 0);
 this.classList.toggle( "active" );
  $("#menu").toggleClass("open");
});

$( window ).scroll(function() {
 $( "#nav-toggle" ).removeClass("active");
 $( "#menu" ).removeClass("open");
});

jsfiddle

感谢您的帮助

Answer 1

试试这个。它检查您是否已经在顶部，如果是，则不会删除查看菜单所需的类：

$("#nav-toggle").click(function() {
    $("html, body").animate({ scrollTop: 0 }, 0);
  $(this).toggleClass( "active" );
  $("#menu").toggleClass("open");
});

$( window ).scroll(function() {
    if($(window).scrollTop() == 0 || $(window).scrollTop() == $(document).height()- $(window).height()) {
   // do nothing
}
    else
  {
    // remove the classes
    $( "#nav-toggle" ).removeClass("active");
    $( "#menu" ).removeClass("open");
  }
});

Answer 2

请查看以下修改后的代码：

BigPipe

  startScrollEvent();

$("#nav-toggle").click(function() {
  stopScrollEvent();
  $("html, body").animate({
    scrollTop: 0
  }, "fast", function() {

    $("#menu").addClass("open");
    $("#nav-toggle").addClass("active");
    setTimeout(function() {
      startScrollEvent();
    }, 200);
  });
});

function startScrollEvent() {
  $(window).on("scroll.myscrollevent", function() {
    $("#nav-toggle").removeClass("active");
    $("#menu").removeClass("open");
  });
}

function stopScrollEvent() {
  $(window).off("scroll.myscrollevent");
}

这里我们开始并停止滚动事件监听器（实际上是删除了animation的回调中添加的类），以实现我们添加active和open课程。

Answer 3

动画有一个完整的方法。

http://api.jquery.com/animate/

观看示例：

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    width: [ "toggle", "swing" ],
    height: [ "toggle", "swing" ],
    opacity: "toggle"
  }, 5000, "linear", function() {
    $( this ).after( "<div>Animation complete.</div>" );
  });
});

jquery等到滚动完成然后执行函数

3 个答案: