Question

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

此导航栏容器（广告）中有一个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 for cloned navbar（来自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');
}
});

我在这里走在正确的轨道上吗？广告和工具栏都是flexboxes。导航栏中的链接显示悬停下拉列表（也很有效）。只是无法找出导航广告！

Answer 1

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

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

以工作为例：

＆＃13;

$(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');
    }
  }
});

＆＃13;

.toolbar-container {
  background-color:#02a;
  padding:5px;
}

.nav-ad {
  float:right;
  color:white;
}

＆＃13;

<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>

＆＃13;

Answer 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。

此外，需要考虑的事项是：大多数广告拦截软件会自动使用包含“ad”一词的类来阻止元素。

在另一个滚动函数

2 个答案: