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

【问题标题】：hide/show div on scroll, within another scroll function在滚动时隐藏/显示 div，在另一个滚动功能中
【发布时间】：2017-04-18 11:45:21
【问题描述】：

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

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

导航栏的基本 HTML：

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

我的代码不起作用：

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

用于克隆导航栏的 jQuery（http://codepen.io/senff/pen/ayGvD 的一个很好的解决方案，可以防止它跳转）：

$('.toolbar-container').addClass('original').clone().insertAfter('.toolbar-container').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;

  if ($(window).scrollTop() >= (orgElementTop)) {

    // scrolled past the original position; now only show the cloned, sticky element.
    // Cloned element should always have same left position and width as original element.

   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');
} else {
  // not scrolled past the menu; only show the original menu.
  $('.cloned').hide();
  $('.original').css('visibility','visible');
}
});

我在正确的轨道上吗？广告和工具栏都是弹性框。导航栏中的链接在悬停时显示一个下拉菜单（这也很好用）。只是无法弄清楚导航广告！

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

首先你有一个错误的选择器淡出，你错过了两个类之间的间距，所以它应该像$('.cloned .nav-ad')。

此外，如果您想根据滚动来淡入（淡入/淡出），则必须与最后一个 window.scrollTop() 值进行比较才能显示/隐藏您的导航广告。

下面是一个工作示例：

$(document).ready(function(){

  $('.toolbar-container').addClass('original').clone().insertAfter('.toolbar-container').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
  var scroll =0;
  $(window).scroll(function() {
   
   if ($(this).scrollTop()>scroll) {
      $('.cloned .nav-ad').fadeOut();
      scroll = $(this).scrollTop();
   } else {
      $('.cloned .nav-ad').fadeIn();
      scroll = $(this).scrollTop();
   }
  });
  
  scrollIntervalID = setInterval(stickIt, 10);
  function stickIt() {
    var orgElementPos = $('.original').offset();
    orgElementTop = orgElementPos.top;

    if ($(window).scrollTop() >= (orgElementTop)) {

        // scrolled past the original position; now only show the cloned, sticky element.
        // Cloned element should always have same left position and width as original element.

       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');
    } else {
      // not scrolled past the menu; only show the original menu.
      $('.cloned').hide();
      $('.original').css('visibility','visible');
    }
  }
});

.toolbar-container {
  background-color:#02a;
  padding:5px;
}

.nav-ad {
  float:right;
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><h2>This is a banner</h2></div>
<div class="toolbar-container">
  <div class="nav-ad">ad goes here </div>
  <div class="toolbar"> link 1 • link 2 • link 3 ... </div>
  
</div>
<p>parag parag parag parga</p>
<p>parag parag parag parga</p>
<p>parag parag parag parga</p>
<p>parag parag parag parga</p>
<p>parag parag parag parga</p>
<p>parag parag parag parga</p>
<p>parag parag parag parga</p>
<p>parag parag parag parga</p>
<p>parag parag parag parga</p>
<p>parag parag parag parga</p>
<p>parag parag parag parga</p><p>parag parag parag parga</p>
<p>parag parag parag parga</p>
<p>parag parag parag parga</p>

【讨论】：

@bibs 这对你有帮助吗。

【解决方案2】：

您的代码不起作用的原因：

您试图在加载 DOM 之前选择 .toolbar-container。将您的代码封装在 $(function(){/* DOM queries 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();
  }
});

另外，here's a demo。

此外，需要考虑的一点是：大多数广告拦截软件会自动拦截类中包含“广告”一词的元素。

【讨论】：