Question

HTML结构类似于：

<header> ..content </header>
<section class="sec-1"> ..content </section>
<section class="sec-2"> ..content </section>
<section id="sec-3">
  <div class="item-1" style="opacity:1"> <img src="exm.jpg" alt=""> </div>
  <div class="item-2" style="opacity:0"> <img src="exm.jpg" alt=""> </div>
  <div class="item3" style="opacity:0"> <img src="exm.jpg" alt=""> </div>
</section>
<section id="sec-4"> ..content </section>
<section class="sec-5"> ..content </section>
<footer> ..content </footer>

当#sec-3出现在http://prntscr.com/c97u0z的底部时，页面滚动会在.item-2 .item-3内.item-1显示#sec-3，#sec-4 1}}，我的意思是在底部。然后页面照常滚动到function getId(element) { return document.getElementById(element); } function scroll_effect() { var yPosition = window.pageYOffset, targetPos = getId('sec4').offsetTop - screen.availHeight; if(yPosition > targetPos) { $('.item-2').css('opacity', '0'); $('.item-1').css('opacity', '1'); $('.item-3').css('opacity', '0'); } if(yPosition > targetPos + getId('sec3').offsetHeight - (getId('sec3').offsetHeight / 2)) { $('.item-2').css('opacity', '1'); $('.item-1').css('opacity', '0'); $('.item-3').css('opacity', '0'); } if(yPosition > targetPos + getId('sec3').offsetHeight) { $('.item-2').css('opacity', '0'); $('.item-1').css('opacity', '0'); $('.item-3').css('opacity', '1'); } } window.addEventListener("scroll", scroll_effect);。

我试过这种方式：

.item-1

它更改了.item-2中的内部项目.item-3，#sec-4，#sec4，但我无法弄清楚如何将$url = "https://fantasy.premierleague.com/a/leagues/standings/313/classic"; $html = file_get_html($url); $html->find('div#ismr-classic-standings'); foreach($html->find('table.ism-table--standings tr') as $row){ //But count($row)=0 due to late loading html in table. }粘贴到底部在更改页面滚动时的内部项目时。

仅供参考，当以同样的方式向下滚动到顶部时也会发生反转。

Answer 1

如果您想将＃se4粘贴到页面底部，只需通过jQuery更改它的CSS属性即可。如果您想将另一部分修复到底部

，请将其删除

#se4 {
  position: fixed;
  bottom: 0;
}

Answer 2

你可以在css中尝试overflow参数。为{3}添加width: 500px;height: 500px;overflow: scroll;。使用此方法不需要任何javascript代码。

    <section class="sec-1">
    ..content
</section>
<section class="sec-2">
    ..content
</section>
<section id="sec-3" style="width: 500px;height: 500px;overflow: scroll;">
    <div class="item-1" style="opacity:1">
        <img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" alt="">
    </div>
    <div class="item-2" style="opacity:1">
        <img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" alt="">
    </div>
    <div class="item3" style="opacity:1">
        <img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" alt="">
    </div>
</section>
<section id="sec-4">
    ..content
</section>
<section class="sec-5">
    ..content
</section>

如何在某些滚动周期内固定HTML部分位置？

2 个答案: