当页面首次加载或用户刷新页面时,我已经编写了一些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
我建议您像here中那样将其减少到20%