Question

如果我滚动到第一张幻灯片的底部（非常高的图像），然后单击“下一步”，则第二张幻灯片在顶部被切掉（或者它甚至可能完全位于窗口顶部之上，具体取决于大小窗口）。有没有办法让第二张幻灯片从窗口顶部开始？

#containerPages {
  width:200px;
  height:auto;
}

#containerPages div img {
  width:100%;
  height:auto;
}

.external {
  background-color: red;
  padding: 10px;
  width: 180px;
  position: fixed;
  bottom: 0;
  z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<div id="containerPages">
    <div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-pager="#no-template-pager"
    data-cycle-pager-template=""
    data-cycle-prev="#prev"
    data-cycle-next="#next"
    data-cycle-slides="> div"
    data-cycle-auto-height=false
    >
        <div><img src="http://placekitten.com/g/500/3000"></div>
        <div><img src="http://placekitten.com/g/500/600"></div>
    </div>
</div>
    
<div id=no-template-pager class="cycle-pager external">             
    <img src="http://placekitten.com/g/20/20">
    <img src="http://placekitten.com/g/20/20"> 
    <span id=prev>&lt;&lt;Prev </span>
    <span id=next> Next&gt;&gt;</span>
</div>

Answer 1

理想情况下，我会使用相同高度的图像，您要求的解决方案可能会变成一种比疾病更糟糕的治疗方法。试试下面但是。

var win_height = $(window).height(), scroll_pos = win_height + $(window).scrollTop();

$('window').on('scroll' , function(){
      if(win_height < scroll_pos) {
          $('#containerPages').css({'position' : 'fixed' });
      }  else {
          $('#containerPages').css({'position' : 'static' });
      }
});

有没有办法让第二张幻灯片在Cycle2的窗口顶部开始？

1 个答案: