Javascript 在另一个滚动功能中，在滚动时隐藏/显示div

我有一个固定在某个高度的导航栏（通过克隆原始导航栏容器并仅在滚动后显示克隆来完成）

每当用户向下滚动时，这个导航栏容器（广告）中有一个div，我想隐藏它，然后在向上滚动时重新出现。然而，我没有任何成功

导航栏的基本HTML：

<div class="toolbar-container">
  <div class="nav-ad"> ... </div>
  <div class="toolbar"> link 1 • link 2 • link 3 ... </div>
</div>

克隆navbar的jQuery（防止其跳转的一个很好的解决方案）：

---

我走对了吗？广告和工具栏都是FlexBox。导航栏中的链接在悬停时显示下拉菜单（这也很有效）。就是搞不懂导航广告

首先，您选择了一个错误的淡出选择器，您错过了两个类之间的间距，因此它应该类似于

$（'.clone.nav ad'）

此外，如果您想根据滚动显示淡入/淡出，则必须与上一个

窗口进行比较。滚动顶部（）

值可显示/隐藏导航广告

下面是一个工作示例：

$（文档）.ready（函数（）{
$（'.toolbar container'）.addClass（'original'）.clone（）.insertAfter（'.toolbar container'）.addClass（'clone'）.css（'position'，'fixed'）.css（'top'，'0'）.css（'margin-top'，'0'）.css（'z-index'，'500'）.removeClass（'original'）.hide（）；
var=0；
$（窗口）。滚动（函数（）{
if（$（this）.scrollTop（）>滚动）{
$（'.clone.nav ad'）.fadeOut（）；
scroll=$（this.scrollTop（）；
}否则{
$（'.clone.nav ad'）.fadeIn（）；
scroll=$（this.scrollTop（）；
}
});
scrollIntervalID=setInterval（stickIt，10）；
功能套件（）{
var orgementpos=$（'.original'）.offset（）；
orgElementTop=orgElementPos.top；
如果（$（窗口）.scrollTop（）>=（orgElementTop））{
//滚动过原始位置；现在仅显示克隆的粘性元素。
//克隆的元素应始终具有与原始元素相同的左侧位置和宽度。
orgElement=$（'.original'）；
coordsOrgElement=orgElement.offset（）；
leftOrgElement=coordsOrgElement.left；
widthOrgElement=orgElement.css（'width'）；
$（'.cloned'）.css（'left'，leftOrgElement+'px'）.css（'top'，0）.css（'width'，widthOrgElement）.show（）；
$（'.original'）.css（'visibility'，'hidden'）；
}否则{
//未滚动过菜单；仅显示原始菜单。
$（'.cloned'）.hide（）；
$（'.original'）.css（'visibility'，'visible'）；
}
}
});
.toolbar容器{
背景色：#02a；
填充物：5px；
}
.导航广告{
浮动：对；
颜色：白色；
}

这是一面旗帜
广告就在这里
链接1•链接2•链接3。。。
帕拉格帕拉格帕拉格酒店

帕拉格帕拉格帕拉格酒店

帕拉格帕拉格帕拉格酒店

帕拉格帕拉格帕拉格酒店

帕拉格帕拉格帕拉格酒店

帕拉格帕拉格帕拉格酒店

帕拉格帕拉格帕拉格酒店

帕拉格帕拉格帕拉格酒店

帕拉格帕拉格帕拉格酒店

帕拉格帕拉格帕拉格酒店

帕拉格帕拉格帕拉格
帕拉格帕拉格帕拉格帕拉格

帕拉格帕拉格帕拉格酒店

parag parag parag parga
代码不起作用的原因：

在加载DOM之前，您正在尝试选择
.toolbar container
。将代码封装在
$（function（）{/*DOM querys here*/}）
中，以便仅在DOM就绪后运行它
您的代码有一个语法错误：最后一行有一个额外的右括号。您可以使用浏览器控制台检查代码的语法错误
至于您的广告隐藏代码，您的选择器中缺少一个空格，因为您的
.nav ad
位于
.cloned
元素中。应该是：

$(window).scroll(function() {
 if ($(this).scrollTop() > 0) {
    $('.cloned .nav-ad').fadeOut();
 } else {
    $('.cloned .nav-ad').fadeIn();
 }
});

但是，让我解释一下为什么您应该更多地修改代码。您编写代码的方式非常低效。要优化代码，请考虑以下内容：

始终使用
var
、
let
或
const
初始化所有变量。未声明的变量被暗示为全局变量，这非常容易出错，通常是一种不好的做法
不要将setInterval（）用于此操作。这是超低效的。改用
onScroll
事件处理程序
不要给元素类来识别它们。相反，将它们存储在变量中。这样，您就不必不断运行新的大量DOM查询
不要在事件处理程序中执行保持不变的度量。相反，测量一次并将其存储在处理程序外部的变量中
不要连续多次调用同一元素上的
.css（）
。相反，向函数传递一个包含所有要应用的样式的对象
下面是一个工作代码：

$(function() {
  var $window = $(window);
  var $toolbarOriginal = $('.toolbar-container');
  var $toolbarClone = $toolbarOriginal
    .clone()
    .css({
      position: 'fixed',
      top: 0,
      marginTop: 0,
      zIndex: 500,
    }).hide().insertAfter($toolbarOriginal);
  var $adClone = $toolbarClone.find('.nav-ad');

  var orgElementPos = $toolbarOriginal.offset();

  $window.scroll(function(e) {
    $window.scrollTop() >= orgElementPos.top ? attach() : detach();
  });

  function attach() {
    $toolbarOriginal.css('visibility', 'hidden');
    $toolbarClone.show().css({
      left: orgElementPos.left,
      width: $toolbarOriginal.css('width'),
      top: 0,
    });
    $adClone.fadeOut();
  }

  function detach() {
    $toolbarOriginal.css('visibility', 'visible');
    $toolbarClone.hide();
    $adClone.fadeIn();
  }
});

也

此外，需要考虑的是：大多数广告屏蔽软件都会自动用包含“ad”一词的类屏蔽元素。
@bibs这样做对您有所帮助。
$(window).scroll(function() {
 if ($(this).scrollTop() > 0) {
    $('.cloned .nav-ad').fadeOut();
 } else {
    $('.cloned .nav-ad').fadeIn();
 }
});

$(function() {
  var $window = $(window);
  var $toolbarOriginal = $('.toolbar-container');
  var $toolbarClone = $toolbarOriginal
    .clone()
    .css({
      position: 'fixed',
      top: 0,
      marginTop: 0,
      zIndex: 500,
    }).hide().insertAfter($toolbarOriginal);
  var $adClone = $toolbarClone.find('.nav-ad');

  var orgElementPos = $toolbarOriginal.offset();

  $window.scroll(function(e) {
    $window.scrollTop() >= orgElementPos.top ? attach() : detach();
  });

  function attach() {
    $toolbarOriginal.css('visibility', 'hidden');
    $toolbarClone.show().css({
      left: orgElementPos.left,
      width: $toolbarOriginal.css('width'),
      top: 0,
    });
    $adClone.fadeOut();
  }

  function detach() {
    $toolbarOriginal.css('visibility', 'visible');
    $toolbarClone.hide();
    $adClone.fadeIn();
  }
});