2015-09-27 70 views
1

那么主无限滚动工作正常。如果我只为帖子制作无限滚动,那么它的工作正常,如果我只为随机新闻制作无限滚动(右侧栏),它工作正常。但是,如果我做无限滚动两个,并在单页上,帖子开始搞乱这样的:需要修复无限滚动

Ren content shuold be where the arrow points

正如你可以看到帖子后随机职位那些帖子之后则Ant刚刚出现出现上次随机帖子。

这是帖子的代码。

<div class="row"> 
      @foreach($posts as $post) 
      @if($latest->id != $post->id) 

      THIS IS WHERE SCROLL BEGINS 

      <div class="col-xs-6 col-lg-6 scroll"> 
      <a href="/post/{{$post->slug}}/{{$post->id}}"> 
      <img class="img-responsive" style="width: 352px; height: 180px" src="{!! url($post->image) !!}" alt=""></a> 
       <h3 class="post" style="font-size: 1.4em;"> 

       @foreach($post->category as $cat) 
       <a style="color: red; text-transform: uppercase; font-size: 13px" href="/categories/{{$cat->name}}">{{$cat->name}}</a> 
       @endforeach 

       <br><a class="post" href="/post/{{$post->slug}}/{{$post->id}}">{{strip_tags($post->title)}}</a></h3> 
       <span style="color: #b8b8b8">Paskelbta {{$post->created_at}}</span> 
       <br><br> 
      </div><!--/.col-xs-6.col-lg-4--> 
      @endif 
      @endforeach 


      </div><!--/row--> 
      {!! $posts->render() !!} 
     </div><!--/.col-xs-12.col-sm-9--> 

     THIS IS WHERE I INCLUDE SIDEBAR 
     @include('comp.sidebar') 

     </div><!--/row--> 

     <hr> 


     INFINITE SCROLL CODE 

     {!! Html::script('jscroll-master/jquery.jscroll.min.js') !!} 
<script type="text/javascript"> 
$(function() { 
    $('.scroll').jscroll({ 
     autoTrigger: true, 
     nextSelector: '.pagination li.active + li a', 
     contentSelector: 'div.scroll', 
     callback: function() { 
      $('ul.pagination:visible:first').hide(); 
     } 
    }); 
}); 
</script> 

这是右侧栏代码:

<div class="col-xs-6 col-sm-2 sidebar-offcanvas" id="sidebar" style="padding: 0px"> 
       <div class="portlet"> 
        <div class="portlet-title"> 
         <div class="caption"> 
          <i class="glyphicon glyphicon-paperclip"></i> 
          <span class="caption-subject text-uppercase"> Atsitiktiniai</span> 
          <span class="caption-helper">viskas po ranka</span> 
         </div> 
        </div> 

        THIS IS WHERE SCROLL BEGINS 

        <div class="scroll"> 
        @foreach($randomPosts as $posts) 
      <img class="popImage" src="{!! url($posts->image) !!}" /> 
      <p><a class="popTitle" href="/post/{{$posts->slug}}/{{$posts->id}}">{{$posts->title}}</a></p><br>       

        @endforeach 
         <div style="display: none">{!! $randomPosts->render() !!}</div> 
        </div> 

       </div>   
     </div><!--/.sidebar-offcanvas--> 


       INFINITE SCROLL CODE 

     {!! Html::script('jscroll-master/jquery.jscroll.min.js') !!} 
<script type="text/javascript"> 
$(function() { 
    $('.scroll').jscroll({ 
     autoTrigger: true, 
     nextSelector: '.pagination li.active + li a', 
     contentSelector: 'div.scroll', 
     callback: function() { 
      $('ul.pagination:visible:first').hide(); 
     } 
    }); 
}); 
</script> 
+0

你在使用twitter-bootstrap吗? – divy3993

+0

@ divy3993是的! – feknaz

+0

你住它吗?如果这样给我们提供一个链接,最好解决你的问题。 – divy3993

回答

0

在你的主体,你有太多的</div>的我猜这是你的问题,除非你已经错过了额外的代码从您的网页。

+0

div的一切都很好。 – feknaz