找不到类时，Javascript隐藏导航答案

【问题标题】：Javascript hides navigation when class not found找不到类时，Javascript隐藏导航
【发布时间】：2020-09-17 07:22:21
【问题描述】：

我有一段 javascript 代码用于子菜单在触摸顶部时停留在视口中，并在碰到页脚时停止滚动。

脚本工作正常，但是在子菜单不存在的页面上，主导航隐藏了......有没有人知道为什么在页面上找不到类时会出现这种冲突，导航将不可见...

代码：

$stick = $('.pm-sidebar-menu-container');
$foot = $('footer');
margin = 200;
offtop = $stick.offset().top - margin;
offbtm = $foot.offset().top - (margin * 2 + $stick.height());

$(window).scroll(function() {
  scrtop = $(window).scrollTop();
  if (scrtop > offtop && $stick.hasClass('natural')) {
    $stick.removeClass('natural').addClass('fixed').css('top', margin);
  }
  if (offtop > scrtop && $stick.hasClass('fixed')) {
    $stick.removeClass('fixed').addClass('natural').css('top', 'auto');
  }
  if (scrtop > offbtm && $stick.hasClass('fixed')) {
    $stick.removeClass('fixed').addClass('bottom').css('top', offbtm + margin);
  }
  if (offbtm > scrtop && $stick.hasClass('bottom')) {
    $stick.removeClass('bottom').addClass('fixed').css('top', margin);
  }
});

【问题讨论】：

标签： javascript css class

【解决方案1】：

但在子菜单不存在的页面上

您可以做的是，仅在存在时执行以下功能。假设子菜单类是.sub-menu。以这种方式更改您的代码：

if ($(".sub-menu").length > 0) {
  $stick = $('.pm-sidebar-menu-container');
  $foot = $('footer');
  margin = 200;
  offtop = $stick.offset().top - margin;
  offbtm = $foot.offset().top - (margin * 2 + $stick.height());

  $(window).scroll(function() {
    scrtop = $(window).scrollTop();
    if (scrtop > offtop && $stick.hasClass('natural')) {
      $stick.removeClass('natural').addClass('fixed').css('top', margin);
    }
    if (offtop > scrtop && $stick.hasClass('fixed')) {
      $stick.removeClass('fixed').addClass('natural').css('top', 'auto');
    }
    if (scrtop > offbtm && $stick.hasClass('fixed')) {
      $stick.removeClass('fixed').addClass('bottom').css('top', offbtm + margin);
    }
    if (offbtm > scrtop && $stick.hasClass('bottom')) {
      $stick.removeClass('bottom').addClass('fixed').css('top', margin);
    }
  });
}

【讨论】：