嘿我在使用AngularJS通过ng-repeat迭代的一组卡上使用Jquery Scrollify(非常棒的顺便说一句)。除了两个包含Highcharts柱形图的卡之外,快照和滚动在所有卡上都能正常工作。最初我假设正面:相对"这将是问题,但即使调整位置静态或初始没有做到这一点。我在这里错过了什么吗?
HTML:
<div class="card awareness" ng-if="card['awareness-bar']">
<div class="row">
<div class="col-xs-12">
<p>You've spent a little more<br>at Text this month.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="awareness_bar" style="width: 80%; height:100%; margin: 0 auto"></div>
</div>
</div>
</div>
Scrollify:
$(function() {
$.scrollify({
section : ".card",
sectionName: false,
setHeights: false,
offset: -50,
interstitialSection : ".flow-header"
});
});
CSS:
.card {
background: rgba(117, 117, 117, 0.3);
padding: 14px 11px;
text-align: center;
margin-top: 15px;
box-shadow: 0 2px 3px rgb(65, 64, 66);
}
.awareness {
background-color: rgba(33, 155, 213, 1);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgba(33, 155, 213, 1), endColorstr=rgba(83, 160, 253, 1));
background-image: -moz-linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
background-image: linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
background-image: -webkit-linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
background-image: -o-linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
background-image: -ms-linear-gradient(top, rgba(33, 155, 213, 1) 0%, rgba(83, 160, 253, 1) 25%, rgba(81, 183, 236, 1) 100%);
background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(33, 155, 213, 1)), color-stop(25%, rgba(83, 160, 253, 1)), color-stop(100%, rgba(81, 183, 236, 1)));
padding-bottom: 40px;
padding-top: 50px;
p {
color: #fff;
font-size: 24px;
}
}