Javascript 将粘性循环放置在滚动条上的文本中_Javascript_Css_Bootstrap 4_Css Position

Javascript 将粘性循环放置在滚动条上的文本中

javascript css bootstrap-4

Javascript 将粘性循环放置在滚动条上的文本中,javascript,css,bootstrap-4,css-position,Javascript,Css,Bootstrap 4,Css Position,你好，我希望有人能帮上忙，我正在尝试在这个页面上重现效果。大约在网站的一半位置，上面写着流式播放音乐/体育/播客等我已经添加了我想出的引导代码，不确定它是否会有帮助，但无论如何。这并没有达到预期的效果。谢谢这是一个jsfiddle 引导示例 $（窗口）.on（“加载”，函数（）{ $（窗口）。滚动（函数（）{ var windowBottom=$（this.scrollTop（）+$（this.innerHeight（）； $（“.fade”）。每个（函数（）{ /*检查每个所需元件

你好，我希望有人能帮上忙，我正在尝试在这个页面上重现效果。大约在网站的一半位置，上面写着流式播放音乐/体育/播客等我已经添加了我想出的引导代码，不确定它是否会有帮助，但无论如何。这并没有达到预期的效果。谢谢

这是一个jsfiddle


引导示例
$（窗口）.on（“加载”，函数（）{
$（窗口）。滚动（函数（）{
var windowBottom=$（this.scrollTop（）+$（this.innerHeight（）；
$（“.fade”）。每个（函数（）{
/*检查每个所需元件的位置*/
var objectBottom=$（this.offset（）.top+$（this.outerHeight（）；
/*如果元素完全在窗口边界内，则淡入*/
如果（objectBottom

Hi@ChuckD，好久不见，我知道，但我想知道你有没有找到解决这个问题的办法？我正试图达到同样的效果。嗨，查克，我知道是远射，但我想知道你有没有找到解决这个问题的办法？我正试图达到同样的效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="container-fluid text-light" style="height:100vh;background:#001d2f;">
    <div class="row h-100">

  </div>
</div>

<script>
$(window).on("load",function() {
  $(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectBottom = $(this).offset().top + $(this).outerHeight();

      /* If the element is completely within bounds of the window, fade it in */
      if (objectBottom < windowBottom) { //object comes into view (scrolling down)
        if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
      } else { //object goes out of view (scrolling up)
        if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
      }
    });
  }).scroll(); //invoke scroll-handler on page-load
});
</script>
<style>
.make-me-sticky2 {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    padding: 0 15px;

    /* z-index: 9999; */

}
.make-me-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 55%;
    padding: 0 15px;
}
.fade {
  margin: 50px;
  padding: 50px;

  opacity: 1;
}
</style>

<div class="container-fluid text-light" style="background:#001d2f;">
 <div class="row ">
   <div class="col-md-12 text-center"  style="background:#000;">

       <div class="make-me-sticky2">
         <div style="background:#f0a;height:45vh;display:flex;">
         </div>
         <h1>LISTEN TO YOUR</h1>
       </div>

       <div class="make-me-sticky">
         <div class="col-md-12 my-auto text-center"  style="position: relative;height:70vh; ">
           <h2 class="fade">1 MUSIC</h2>
         </div>
       </div>

       <div class="make-me-sticky">
          <div class="col-md-12 my-auto text-center"  style="position: relative;height:70vh; ">
           <h2 class="fade">2 NEWS</h2>
         </div>
       </div>

       <div class="make-me-sticky">
          <div class="col-md-12 my-auto text-center"  style="position: relative;height:70vh; ">
           <h2 class="fade">3 PODCASTS</h2>
         </div>
       </div>

   </div>

   <div class="col-md-12 text-center">
     <h2  class="fade">Play music and entertainment from your favorite apps with your voice</h2>
   </div>

 </div>
</div>

</body>