在某个点添加div

Question

我想在某一点上显示一个id。我从这里看了其他的例子，并像我一样模仿我的。但是，一旦我进入滚动点，我的ID就不显示了，我不确定。我想要显示mobile-transparent的ID，我已将位置设置为绝对位置，并添加了z-index以尝试解决此问题。

有人看到我做错了吗？

＆＃13;

＆＃13;

$(document).ready(function() {
    $("#mobile-transparent").hide(); //hide your div initially
    var topOfOthDiv = $("#green").offset().top;
    $(window).scroll(function() {
        if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            $("#mobile-transparent").show(200); //reached the desired point -- show div
        }
    });
});

＆＃13;

#blue, #red, #green {
  height: 500px;
  width: 100%;
}
#blue {
  background: blue;
}
#red {
  background: red;
}
#green {
  background: green;
}
#mobile-transparent {
  padding: 10px;
  background-color: #000;
  opacity: 0.7;
  width: 40px;
  z-index: 1;
  position: absolute;
  top: 20%;
  right: 5%;
}

.mobile-down-button {
  z-index: 2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>
<div id="mobile-transparent">
  <img src="http://optimumwebdesigns.com/icons/mobile_menu_white.png" class="mobile-down-button" alt="menu" height="35px" width="35px">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

代替position:fixed position:absolute;。

因为position:absolute将其设置为给定的特定位置。滚动时不显示。

$(document).ready(function() {
    $("#mobile-transparent").hide(); //hide your div initially
    var topOfOthDiv = $("#green").offset().top;
    $(window).scroll(function() {
  
    if ($(this).scrollTop() > topOfOthDiv) {
       $('#mobile-transparent').fadeIn();
     } else {
       $('#mobile-transparent').fadeOut();
     }
       
    });
});

#blue, #red, #green {
  height: 500px;
  width: 100%;
}
#blue {
  background: blue;
}
#red {
  background: red;
}
#green {
  background: green;
}
#mobile-transparent {
  padding: 10px;
  background-color: #000;
  opacity: 0.7;
  width: 40px;
  z-index: 1;
  position: fixed;
  top: 20%;
  right: 5%;
}

.mobile-down-button {
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>
<div id="mobile-transparent">
  <img src="http://optimumwebdesigns.com/icons/mobile_menu_white.png" class="mobile-down-button" alt="menu" height="35px" width="35px">
</div>