在某个点加一个div

Question

我想在某个时候显示一个 id。我从这里查看了其他示例，并像我一样对我的进行了建模。但是，一旦我到达滚动点，我的 id 就不会显示，我不确定。我要显示的 id mobile-transparent，我已将位置设置为绝对位置并添加了一个 z-index 以尝试解决该问题。

有没有人看出我做错了什么？

$(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
        }
    });
});

#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;
}

<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>

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>

在某个点加一个div

Adding a div at a certain point

html

javascript

css

jquery

show