다른 스크롤 기능 내에서 스크롤 할 때 div 표시/숨기기

Question

특정 높이로 고정되는 navbar가 있습니다 (원래 navbar-container를 복제하고 스크롤 한 후 복제본 만 표시).

사용자가 아래로 스크롤 할 때마다 숨기고 싶은 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'); 
} 
}); 

여기 올바른 길에 있습니까? 광고와 툴바는 모두 플렉스 박스입니다. 탐색 표시 줄의 링크에 마우스를 올리면 드롭 다운 메뉴가 표시됩니다 (위도 좋음). 그냥 nav 광고를 알아낼 수 없습니다!

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>

Answer 2

이유 :

1. 당신은 DOM이로드되기 전에 .toolbar-container을 선택하려는 작업 예제 벨로

   . $(function(){/* DOM queries here */})에 코드를 캡슐화하면 DOM을 준비한 후에 만 ​​코드를 실행할 수 있습니다.

2. 코드에 구문 오류가 있습니다. 마지막 행에 추가로 닫는 괄호가 있습니다. 브라우저 콘솔을 사용하여 코드의 구문 오류를 확인할 수 있습니다. 당신의 .nav-ad가 .cloned 요소 내부로 광고 숨어 코드로

, 당신은, 당신의 선택에 공백이없는 것입니다. 다음과 같아야합니다.

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

그러나 코드를 더 변경해야하는 이유를 설명하겠습니다. 코드 작성 방법은 매우 비효율적입니다. 코드를 최적화하려면 다음을 고려 :

1. 항상 var, let 또는 const으로 모든 변수를 초기화합니다. 선언되지 않은 변수는 전역 변수로 암시되며, 이는 오류가 발생하기 쉽고 일반적으로 나쁜 습관입니다.
2. 이 작업에는 setInterval()을 사용하지 마십시오. 이것은 매우 비효율적이다. 대신 onScroll 이벤트 처리기를 사용하십시오.
3. 요소를 식별하도록 클래스에 제공하지 마십시오. 대신 변수에 저장하십시오.이렇게하면 새로운 무거운 DOM 쿼리를 끊임없이 실행할 필요가 없습니다.
4. 이벤트 처리기 내에서 일정하게 유지되는 측정을 수행하지 마십시오. 대신에 한 번 측정하여 처리기 외부의 변수에 저장하십시오.
5. 같은 요소에 대해 .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'라는 단어가 포함 된 클래스로 요소를 자동으로 차단합니다.