javascript - 在滚动上隐藏/显示 div，在另一个滚动功能中

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(来自 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() 值进行比较以显示/隐藏您的导航广告。

下面是一个工作示例:

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