僅當您進入元素視圖時才顯示div /元素

Question

我想隱藏元素（圖表），並且僅當我處於元素視圖中時才顯示它。

這是代碼：

HTML圖表：

<section id="skills" class="skills-section"> 

     <div> 
      <h1>MY SKILLS</h1> 
     </div> 

<ul class="chart" id="chart-line"> 
    <li> 
    <span style="height:5%; background: rgba(0, 102, 255, 0.80);" title="ActionScript"></span> 
    </li> 
    <li> 
    <span style="height:70%; background: rgba(204, 51, 51, 0.80);" title="JavaScript"></span> 
    </li> 
    <li> 
    <span style="height:50%; background: rgba(255, 186, 2, 0.80);" title="CoffeScript"></span> 
    </li> 
    <li> 
    <span style="height:75%; background: rgba(0, 153, 102, 0.80);" title="HTML"></span> 
    </li> 
    <li> 
    <span style="height:90%; background: rgba(0, 102, 255, 0.80);" title="HTML"></span> 
    </li> 
    <li> 
    <span style="height:15%; background: rgba(204, 51, 51, 0.80);" title="HTML"></span> 
    </li> 
    <li> 
    <span style="height:40%; background: rgba(255, 186, 2, 0.80);" title="HTML"></span> 
    </li> 
    <li> 
    <span style="height:55%; background: rgba(0, 153, 102, 0.80);" title="HTML"></span> 
    </li> 
</ul> 


    <div class="button-down"> 
     <a class="page-scroll" href="#projects"><button class="button-down-text">TESTO</button></a>    
    </div> 
    </section> 

    <!-- Projects Section --> <!-- This is the begin of the section below --> 
    <section id="projects" class="projects-section"> 

CSS圖表：

.chart { 
    display: table; 
    table-layout: fixed; 
    width: 90%; 
    /*max-width: 700px;*/ 
    height: 65%; 
    margin: 0 auto; 
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%); 
    background-size: 100% 50px; 
    background-position: left top; 
} 
.chart li { 
    position: relative; 
    display: table-cell; 
    vertical-align: bottom; 
    height: 200px; 
} 
.chart span { 
    margin: 0 1em; 
    display: block; 
    /*background: rgba(209, 236, 250, 0.75);*/ 
    animation: draw 1s ease-in-out; 
} 
.chart span:before { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 100%; 
    padding: 5px 1em 0; 
    display: block; 
    text-align: center; 
    content: attr(title); 
    word-wrap: break-word; 
} 

@keyframes draw { 
    0% { 
    height: 0; 
    } 
} 

JS的隱藏元素：

 $(function() { 
    var oTop = $('#chart-line').offset().top - window.innerHeight; 
    var oBottom = $('#projects').offset().top - window.innerHeight; 
    var chartHidden = true; 
    $(window).scroll(function(){ 
     var pTop = $('body').scrollTop(); 
     if ((pTop > oTop) && (chartHidden)) { 
      chartHidden = false; 
      start_count(); 
     } else if (pTop < oTop) { 
      chartHidden = true; 
     } 

    }); 
}); 

我想說明只有當我滾動時纔會顯示圖表我在上面，當我在圖表上方的視圖中時，我想隱藏圖表。

Answer 1

它看起來不像你在做任何事情與你的chartHidden。嘗試使用jQuery更改圖表的CSS。

var chart = $("#chart-line")[0]; 

// when chartHidden = false, do something like this 
$(chart).css("display", "none");