javascript - 如何检测滚动条上的 div 框

Question

我想在每次向下滚动页面时固定一个 div 框，因为触摸该框并继续向下滚动，以便它在用户看到它后永远不会消失。

$(window).scroll(function() {
    if($('section#top_casino_offer').scrollTop() + 
    $('section#top_casino_offer').innerHeight() >= $('section#top_casino_offer')[0].scrollHeight) {
      console.log('show');
    } else {
      console.log('hide');
   }
});

I made a quick snippet for it here

我试过上面的代码，但它不起作用。

Answer 1

您可以像这样指定滚动值，检查以下代码段:

$(window).scroll(function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 90;             
	// set to whatever you want it to be

    if(y_scroll_pos > scroll_pos_test) {
	   $("#top_casino_offer").css("position","fixed");
    }
	else
	{
		$("#top_casino_offer").css("position","relative");
	}
});

.outer{
  height: 1100px;
  background: green;
  width: 100%;
}
#yellow{background: yellow;
}
#top_casino_offer {
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<p>Paragraph</p>
<section id="yellow">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque repellendus eligendi, dolorem vel sapiente harum repellat voluptatum hic, officiis perspiciatis dolor labore maiores cumque eos necessitatibus non ex, fuga.</p>
  </section>
  <section id="top_casino_offer">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque repellendus eligendi, dolorem vel sapiente harum repellat voluptatum hic, officiis perspiciatis dolor labore maiores cumque eos necessitatibus non ex, fuga.</p>
  </section>
</div>

希望这有帮助:)