2015-09-27 68 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