在另一个滚动功能中隐藏/显示滚动条div

我有一个固定在某个高度的导航栏（通过克隆原始导航栏容器并仅在滚动后显示克隆完成）。在另一个滚动功能中隐藏/显示滚动条div

此navbar-container（广告）中有一个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'); 
} 
});

我在正确的轨道上吗？广告和工具栏都是flexbox。导航栏中的链接显示悬停下拉（这也很棒）。只是无法弄清楚导航广告！

来源

2017-04-18 bibs

首先，你有一个错误的选择器淡出，你错过了两个类之间的间距，所以它应该像$('.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>

来源

2017-04-18 12:41:43

@bibs这是否帮助你。 –

理由为什么你的代码不起作用：

你试图选择.toolbar-container前的DOM被加载。只有在DOM准备就绪后，才能将代码封装在$(function(){/* DOM queries here */})中以便运行它。
您的代码有语法错误：最后一行有一个额外的右括号。您可以使用浏览器控制台检查代码是否有语法错误。

至于广告隐藏代码，你错过了你的选择空间，为您的.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”的类的元素。

来源

2017-04-18 12:45:54

在另一个滚动功能中隐藏/显示滚动条div

回答

相关问题