仅当您进入元素视图时才显示div /元素
问题描述:
我想隐藏元素(图表),并且仅当我处于元素视图中时才显示它。仅当您进入元素视图时才显示div /元素
这是代码:
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;
}
});
});
我想说明只有当我滚动时才会显示图表我在上面,当我在图表上方的视图中时,我想隐藏图表。
答
它看起来不像你在做任何事情与你的chartHidden
。尝试使用jQuery更改图表的CSS。
var chart = $("#chart-line")[0];
// when chartHidden = false, do something like this
$(chart).css("display", "none");
但是我之所以想要隐藏元素,是因为我想在图表的视图中对图表进行收费。如果我改变CSS,那么动画不会等待收费。 – Matteo
@Matteo,如果你在'chartHidden = false'之后的'if'语句中放置'$(chart).css(“display”,“none”);'' – Naltroc