1
我寫了一些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>
比ks花費你一些寶貴的時間來理解我的問題。如果您需要關於我面臨的問題的任何其他信息，請讓我知道。任何形式的幫助將不勝感激。等待你的寶貴回覆。