특정 섹션 내에서 스크롤하면 특정 ID가 사라집니다.

Question

특정 섹션 ID ("# performance-graphs")를 스크롤하면 특정 ID (#logo)를 삭제하려고하면 숨겨진 ID가 해당 섹션을 스크롤 한 후에 다시 표시되어야합니다.

아래 코드를 참조하십시오. 현재 ID가 작동하지 않지만 생각이 잘못되어 있습니다. 기본적으로 내가 차트 섹션에 도착하면 로고를 제거하여 내 메인 헤더를 작게하려고합니다.

는

jQuery 코드

<script type="text/javascript"> 
$(document).ready(function() { 
$('#performance-charts').scroll(function() { 
var scroll = $('#performance-charts').scrollTop(); 
if (scroll > 10) { 
$('#logo').css("display", "hidden").fadeOut(250); 
} 
else { 
$('#logo').css("display", "block").fadeIn(250); 
} 
}); 
}); 
</script> 

HTML SNIPPET BODY

<section id="performance-graphs"> 
<a id="performance-graphs"></a> 
<div class="double-space"></div>  
    <div class="centered-wrapper"> 
     <h1 class="section-title">charting performance</h1> 

............................................................... 

</div> 
</section> 

HTML SNIPPET HEADER는

<span itemscope itemtype="http://schema.org/LocalBusiness"><header id="fixed" class="solid-header"> 
    <div class="centered-wrapper"> 
    <div itemscope itemtype="http://schema.org/Service"><div itemprop="ServiceType" content="Asset and Fund Management"></div></div> 
    <div id="logo"><a href="../index.html"><img src="../images/value_images/VPM_global3a.png" alt="White Fleet Globel Select Opportunities"></a> 
     <p><a href="http://www.valueportfolio.co.za" target="_blank" class="link">LU0721514452:USD - Managed by Value Portfolio Managers (Pty) Ltd</a></p></div> 
    <a href="../index-backup.html" title="Value Portfolio Home Page"></a><br> 
    <a class="nav-btn"><i class="fa fa-bars"></i><span>Menu</span></a>BaB 

는 당신의 도움을 크게 감상 할 수있다.

Answer 1

여기 있습니다. 나는 당신의 바이올린과 updatet을 사용했습니다. HERE

id는 고유해야하기 때문에 기본적으로 거기에 나쁜 코드가 있습니다! (난 그냥 중복 된 ID 중 하나에 또 다른 charakter를 추가 난 그냥이처럼 JS 코드를 업데이트

:. 당신이 당신의 그래프 컨테이너의 offset().top을 필요로의 스크롤 위치로 비교하기 때문에

if ($(document).scrollTop() > $('section#performance-graphss').offset().top) { 

qhole 문서

---

편집 :.

이 FIDDLE 도움을합니까

0?

난 그냥 요소를 숨기기 위해 다른 검사를 추가 :

$('section#performance-graphss').offset().top + $('section#performance-graphss').height() > $(document).scrollTop() 

당신이 용기를지나 스크롤 할 때 그래서 로고가 display: blick; 다시 가져옵니다.

내가 추가 한 CSS 조심해 : 컨테이너는 높이가 필요합니다.

#performance-graphss { 
    width: 100%; 
    height: 700px; 
    display: block; 
}