Question

我有以下代码：

.wrapper {
    position: relative;  
    height: 949px;
    display: none;
}
.spacer {
  width: 100%;
  height: 700px;
  background: black;
}
.pink-curve {
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/pink-curve.png);
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    left: 72px;
    top: 206px;
}

<div class="spacer">
    <h1 style="color: #FFFFFF;">SCROLL DOWN</h1>
    <h1 id="clickme" style="color: #FFFFFF;">CLICK TO SHOW WRAPPER DIV</h1>
</div>
<div class="wrapper">
     <span class="pink-curve"></span>
</div>
<div class="spacer"></div>

jQuery(function() {
    jQuery('#clickme').on('click', function() {
        jQuery('.wrapper').show();
    });

    var curve1 = jQuery('.pink-curve');
    curve1.waypoint(function(direction) {
        curve1.css({"height" : "30px", "width" : "80px"});
    }, {
        offset: '70%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "80px", "width" : "80px"});
    }, {
        offset: '68%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "100px", "width" : "80px"});
    }, {
        offset: '66%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "165px", "width" : "100px"});
    }, {
        offset: '64%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "200px", "width" : "180px"});
    }, {
        offset: '62%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "240px", "width" : "180px"});
    }, {
        offset: '60%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "300px", "width" : "180px"});
    }, {
        offset: '58%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "300px", "width" : "220px"});
    }, {
        offset: '56%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "270px"});
    }, {
        offset: '54%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "320px"});
    }, {
        offset: '52%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "370px"});
    }, {
        offset: '50%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "430px"});
    }, {
        offset: '48%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "480px"});
    }, {
        offset: '46%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "520px"});
    }, {
        offset: '44%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "570px"});
    }, {
        offset: '42%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "620px"});
    }, {
        offset: '40%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "670px"});
    }, {
        offset: '38%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "720px"});
    }, {
        offset: '36%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "770px"});
    }, {
        offset: '34%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "820px"});
    }, {
        offset: '32%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "870px"});
    }, {
        offset: '30%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "330px", "width" : "905px"});
    }, {
        offset: '28%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "365px", "width" : "949px"});
    }, {
        offset: '26%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "405px", "width" : "949px"});
    }, {
        offset: '24%'
    });
    curve1.waypoint(function() {
        curve1.css({"height" : "436px", "width" : "949px"});
    }, {
        offset: '22%'
    });
});

这是Fiddle。

如果我从display: none;移除.wrapper它可以正常工作，如果该元素被隐藏然后显示，则它将无效。

关于如何让它发挥作用的任何想法？

Answer 1

替换show方法。我可能错了，但我相信show方法会覆盖你不会与hidden元素级联的wrapper类。相反，请执行以下操作：

jQuery('#clickme').on('click', function() {
   jQuery('.wrapper').css('display','block');
});

根据以下评论：

如果您希望在滚动时加载它，您可以启动滚动功能并指定在文档滚动到该点后您希望它显示的y轴距离。

jQuery(document).scroll(function() {
  var y = $(this).scrollTop();
    if (y > 300) {
      $('.wrapper').fadeIn();
    } else {
      $('.wrapper').fadeOut();
    }
});

fadein方法为您提供了更好的过渡但不是必需的

查看更新后的Fiddle

Answer 2

当您将元素显示时，是否可能需要调用static async Task GetLeads(ForceClient client) { Console.WriteLine("Get Leads"); var accts = new List<Lead>(); var results = await client.QueryAsync<Lead>(Lead._select); var totalSize = results.TotalSize; Console.WriteLine("Queried " + totalSize + " leads."); accts.AddRange(results.Records); Console.WriteLine("Added " + results.Records.Count + " leads..."); var nextRecordsUrl = results.NextRecordsUrl; if (!string.IsNullOrEmpty(nextRecordsUrl)) { Console.WriteLine("Found more records..."); while (true) { var continuationResults = await client.QueryContinuationAsync<Lead>(nextRecordsUrl); Console.WriteLine("Queried an additional " + continuationResults.Records.Count + " leads."); accts.AddRange(continuationResults.Records); if (string.IsNullOrEmpty(continuationResults.NextRecordsUrl)) break; nextRecordsUrl = continuationResults.NextRecordsUrl; } } Upsert(accts, Lead.target); }？

最初隐藏元素时，航点不起作用

2 个答案: