Javascript 滚动时更改html媒体播放器的位置和大小

我试图在用户的滚动效果上出现和消失一个div。在这里，我需要在滚动时改变选通媒体播放的位置。滚动时，媒体播放应以一个小div显示（即带有

class=“node video--wrapper的第一个div被卡住了”

）。在滚动大div时（即第二个div应该消失——我已经为其编写了一个js函数。但是当用户到达顶部时，第二个div出现，第一个div消失）

现在，问题是我把媒体播放器代码放在两个div中。在浏览器加载时，大的或第二个div无法播放播放器，而小的div可以播放。此外，我很难正确地显示和消失小的或第一个div。因为在到达顶部时，播放器从一开始就启动。我真的很困惑如何操作正确地这样做，我没有任何可用的js库，如果有的话。请帮助我与您的反馈

我已经包括了一些CSS，我用它来随着浏览器大小的变化调整媒体播放器的大小

<style type="text/css">

    .containing-block {
      width: 75%;
    }

    .outer-container {
      position: relative;
      height: 0;
      padding-bottom: 56.25%;
    }
    #mediaVideoViewPlayer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .node-video .node-video--wrapper.is_stuck {
    z-index: 999999;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 4px 4px -2px #cccccc;
    -moz-box-shadow: 0 4px 4px -2px #cccccc;
    -webkit-box-shadow: 0 4px 4px -2px #cccccc;
    box-shadow: 0 7px 19px 0 rgba(0,0,0,0.1);
    -moz-box-shadow: 0 7px 19px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 7px 19px 0 rgba(0,0,0,0.1);
    margin-left: -999999px;
    padding-left: 999999px;
    margin-right: -999999px;
    padding-right: 999999px;
}

</style>



<div class="node-video--wrapper is_stuck" style="position: fixed; top: 0px; width: 915px;">
    <a class="close">
        <i class="fa fa-close fa-flip-horizontal"></i>
    </a>
    <div class="node-video--player">
        <div id="video-player-top">
            <div style="display:none"></div>
            <div class="containing-block">
                <!-- Start of Brightcove Player -->
                <div id="mediaVideoViewPlayer" class="outer-container"></div>
                <!-- End of Brightcove Player -->
            </div>
        </div>
    </div>
</div>


<div class="node-video--wrapper">
    <a class="close">
        <i class="fa fa-close fa-flip-horizontal"></i>
    </a>
    <div class="node-video--player">
        <div id="video-player-top">
            <div style="display:none"></div>
            <div class="containing-block">
                <!-- Start of Brightcove Player -->
                <div id="mediaVideoViewPlayer" class="outer-container"></div>
                <!-- End of Brightcove Player -->
            </div>
        </div>
    </div>
</div>

.包含块{
宽度：75%；
}
.外容器{
位置：相对位置；
身高：0；
垫底：56.25%；
}
#mediaVideoViewPlayer{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.node video.node-video--wrapper.被卡住了{
z指数：999999；
左：0；
右：0；
背景色：#fff；
盒影：0 4px4px-2px#CCCC；
-moz盒阴影：0 4px4px-2px#cccc；
-网络工具包盒阴影：0 4px4px-2px#CCCC；
盒影：0 7px 19px 0 rgba（0,0,0,0.1）；
-moz盒阴影：0 7px 19px 0 rgba（0,0,0,0.1）；
-网络工具包盒阴影：0 7px 19px 0 rgba（0,0,0,0.1）；
左边距：-999999像素；
左侧填充：999999像素；
右边距：-999999像素；
右侧填充：999999像素；
}

以下是一些js：

<script type="text/javascript">
$(window).scroll(function() {

    if ($(this).scrollTop()>0)
     {
        $('#my_scroll').fadeOut();
     }
    else
     {
      $('#my_scroll').fadeIn();
     }
 });
</script>

<script type="text/javascript">
$(window).scroll(function() {

    if ($(this).scrollTop()>0)
     {
        $('.is_stuck').fadeIn();
     }
    else
     {
      $('.is_stuck').fadeOut();
     }
 });
</script>

$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>0）
{
$（“#我的滚动”）.fadeOut（）；
}
其他的
{
$（'my#u scroll'）.fadeIn（）；
}
});
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>0）
{
$（'.is_stuck'）.fadeIn（）；
}
其他的
{
$（'.is_stuck'）.fadeOut（）；
}
});

如果要修复的是你的jQuery。我在你的jQuery中添加了$（function（）{}）。你也在使用谷歌的jQuery CDN，这样你就可以使用jQuery了吗？我只是在代码中没有看到，所以我不得不问一下

<script type="text/javascript">
$(function(){
$(window).scroll(function() {

  if ($(this).scrollTop()>0)
   {
      $('#my_scroll').fadeOut();
      $('.is_stuck').fadeIn();
   }
  else
   {
    $('#my_scroll').fadeIn();
    $('.is_stuck').fadeOut();
   }

  });
</script>
});

$（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>0）
{
$（“#我的滚动”）.fadeOut（）；
$（'.is_stuck'）.fadeIn（）；
}
其他的
{
$（'my#u scroll'）.fadeIn（）；
$（'.is_stuck'）.fadeOut（）；
}
});
});

hi small或first div在加载时不应可见。它应该在用户向下滚动时显示，在用户返回顶部时消失。目前，我们的代码没有使该小div在第一次加载时消失。@anaybase我认为您应该多检查一下jQuery和HTML，因为您没有id调用my_scroll或do使用CSS正确标记了要显示和消失的div，因此很难看到您希望执行的操作。我添加的只是为了让jQuery正常工作。