Question

此div只应在向下滚动270px后显示，无法使其工作。 div里面还有很多东西，但是真的不应该改变任何东西。

HTML：

<script src="Jquery.js"></script>
<div id="Movingmenu"></div>

CSS：

#Movingmenu {
  position: fixed;
  top: 10%;
  width: 5%;
  height: 10%;
  left: 7.5%;
  z-index: 100;
  background: #989898;
  transition: left 0.3s ease-in-out,
              width 0.3s ease-in-out, 
              height 0.3s ease-in-out;
  display: none;
}

JQuery的：

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 270px) {
    $('#Movingmenu').fadeIn();
  } else {
    $('#Movingmeny').fadeOut();
  }
});

Answer 1

您目前正在将270px打印为字符串，这意味着为了使其正常工作，您需要将其放在引号中。

  if (y > "270px")

或者只是一起删除px

  if (y > 270)

除非你另有说明，否则jquery会以px完成所有测量。例如：

if (y > "10%")

Answer 2

请更改此

if(y > 270px )

到

if(y > 270)

 $(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 270) {
            $('#Movingmenu').fadeIn();
        }
        else {
            $('#Movingmenu').fadeOut();
        }
    });

 #Movingmenu {
        position: fixed;
        top: 10%;
        width: 5%;
        height: 10%;
        left: 14.5%;
        z-index: 100;
        background: #989898;
        transition: left 0.3s ease-in-out,
        width 0.3s ease-in-out,
        height 0.3s ease-in-out;
        display: none;
    }

    #MovingmenuTest {
        top: 10%;
        width: 12%;
        height: 1000px;
        left: 7.5%;
        z-index: 100;
        background: #989898;
        transition: left 0.3s ease-in-out,
        width 0.3s ease-in-out,
        height 0.3s ease-in-out;
        display: block;
        border: 1px solid #ccc;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Movingmenu">Main Div</div>
<div id="MovingmenuTest">This is test check</div>

Answer 3

试试这个：

演示： https://output.jsbin.com/wumuzasudi

#Movingmenu {
  position: fixed;
  top: 10%;
  width: 5%;
  height: 10%;
  left: 7.5%;
  z-index: 100;
  background: #989898;
  transition: left 0.3s ease-in-out,
  width 0.3s ease-in-out, 
  height 0.3s ease-in-out;
  display: none;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if(y > 270) {
    $('#Movingmenu').fadeIn();
  } else {
    $('#Movingmenu').fadeOut();
  }
});
</script>
</head>
<body>
<div id="Movingmenu">Hello World</div>
<p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
</body>
</html>

Jquery div隐藏/显示滚动距离

3 个答案: