我编写了一些 jQuery 代码并操纵了一些 CSS 代码来隐藏 <div> 中包含的图像。第一次加载页面或用户刷新页面时的标签。
如果您转到以下网址
<强> http://example.com
你会知道我做了什么。
当您第一次访问此页面时，当您向下滚动页面时，您会看到一组图像(一行中的一个/两个图像)出现。
但是如果您仔细观察此功能，您会发现在我向下滚动页面直到出现下一组图像时出现的空白量太多了。
您将在平板电脑或手机上更好地体验“太多空白”问题。
我想将这个空间减少到当前出现的空白空间的 5%。我用我的代码尝试了很多技巧，但仍然没有成功。
有人可以在这方面帮助我吗？
为了您的引用，我把我写的代码放在下面:
HTML代码是:
<div class="container">
<div class="row" id="heading">
<h3 align="center">Current Rebates</h3>
<div class="span6 hideme">
<img src="img/1.jpg"/>
<table id="table-transform">
<tbody>
<tr>
<td class="span6"> <h3>Lorem Ipsum</h3>
<p>Exp. Date 12th sep, Rebate Count- 20 </p></td>
<td class=""> <a class="btn btn-success btn-large" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>
<div class="span6 hideme">
<img src="img/2.jpg"/>
<table id="table-transform">
<tbody>
<tr>
<td class="span6"> <h3>Lorem Ipsum</h3>
<p>Exp. Date 12th sep, Rebate Count- 20 </p></td>
<td class=""> <a class="btn btn-success btn-large" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span6 hideme">
<img src="img/3.jpg"/>
<table id="table-transform">
<tbody>
<tr>
<td class="span6"> <h3>Lorem Ipsum</h3>
<p>Exp. Date 12th sep, Rebate Count- 20 </p></td>
<td class=""> <a class="btn btn-success btn-large" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>
<div class="span6 hideme">
<img src="img/4.jpg"/>
<table id="table-transform">
<tbody>
<tr>
<td class="span6"> <h3>Lorem Ipsum</h3>
<p>Exp. Date 12th sep, Rebate Count- 20 </p></td>
<td class=""> <a class="btn btn-success btn-large" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row ">
<div class="span6 hideme">
<img src="img/5.jpg"/>
<table id="table-transform">
<tbody>
<tr>
<td class="span6"> <h3>Lorem Ipsum</h3>
<p>Exp. Date 12th sep, Rebate Count- 20 </p></td>
<td class=""> <a class="btn btn-success btn-large" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>
<div class="span6 hideme">
<img src="img/6.jpg"/>
<table id="table-transform">
<tbody>
<tr>
<td class="span6"> <h3>Lorem Ipsum</h3>
<p>Exp. Date 12th sep, Rebate Count- 20 </p></td>
<td class=""> <a class="btn btn-success btn-large" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span6 hideme">
<img src="img/7.jpg"/>
<table id="table-transform">
<tbody>
<tr>
<td class="span6"> <h3>Lorem Ipsum</h3>
<p>Exp. Date 12th sep, Rebate Count- 20 </p></td>
<td class=""> <a class="btn btn-success btn-large" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>
<div class="span6 hideme">
<img src="img/8.jpg"/>
<table id="table-transform">
<tbody>
<tr>
<td class="span6"> <h3>Lorem Ipsum</h3>
<p>Exp. Date 12th sep, Rebate Count- 20 </p></td>
<td class=""> <a class="btn btn-success btn-large" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span6 hideme">
<img src="img/3.jpg"/>
<table id="table-transform">
<tbody>
<tr>
<td class="span6"> <h3>Lorem Ipsum</h3>
<p>Exp. Date 12th sep, Rebate Count- 20 </p></td>
<td class=""> <a class="btn btn-success btn-large" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>
<div class="span6 hideme">
<img src="img/6.jpg"/>
<table id="table-transform">
<tbody>
<tr>
<td class="span6"> <h3>Lorem Ipsum</h3>
<p>Exp. Date 12th sep, Rebate Count- 20 </p></td>
<td class=""> <a class="btn btn-success btn-large" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span6 hideme">
<img src="img/2.jpg"/>
<table id="table-transform">
<tbody>
<tr>
<td class="span6"> <h3>Lorem Ipsum</h3>
<p>Exp. Date 12th sep, Rebate Count- 20 </p></td>
<td class=""> <a class="btn btn-success btn-large" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>
<div class="span6 hideme">
<img src="img/7.jpg"/>
<table id="table-transform">
<tbody>
<tr>
<td class="span6"> <h3>Lorem Ipsum</h3>
<p>Exp. Date 12th sep, Rebate Count- 20 </p></td>
<td class=""> <a class="btn btn-success btn-large" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div> <!-- /container -->
CSS 代码是:
<style>
.hideme
{
opacity:0;
}
@media (max-width: 979px) {
.navbar-fixed-top.navbar-absolute {
position: absolute;
margin: 0;
}
}
.navbar-absolute + div {
margin-top: 50px;
}
body { padding-top: 58px; }
</style>
jQuery 代码是:
<script>
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
//alert(bottom_of_object);
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},300);
}
});
});
});
</script>
感谢您抽出宝贵时间了解我的问题。如果您需要有关我所面临问题的任何其他信息，请告诉我。任何形式的帮助将不胜感激。等待您宝贵的回复。
最佳答案
您可以通过基础数学来解决这个问题。您需要将空间减少到当前空间的 5%。所以你减少了原始值的 95%:
if( bottom_of_window > (bottom_of_object - (bottom_of_object * 0.95 )){
尽管这会导致图像显示 too soon
我建议您将它减少到 20%，就像 here 中那样
关于javascript - 如何减少在用户向下滚动页面时加载下一组图像之前出现的空白量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26030486/