在另一個滾動功能中隱藏/顯示滾動條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

回答

相關問題