当页面首次加载或用户刷新页面时,我已经编写了一些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%

09-10 10:38
查看更多