jquery div隐藏/显示在滚动距离
问题描述:
这个div应该只显示滚动后270px,不能得到它的工作。 Theres里面还有一些东西,但是这不应该改变任何东西。jquery 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();
}
});
答
你当前打印270px作为一个字符串,这意味着为了使它工作,你需要把它放在引号中。
if (y > "270px")
或者只是删除px
一起
if (y > 270)
jQuery不会在PX所有测量反正,除非你告诉它,否则。例如:
if (y > "10%")
答
请改变这个
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>
+0
改变了这些,但它似乎并不奏效:/双重检查了一切,但仍然没有。 – Crispybagel
+0
查看我的更新回答 –
答
试试这个:
演示: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>
你改变什么,如果'如果(Y> 270px)''到IF(Y> 270)'?你也有一个在你的else语句中的类型,把'$('#Movingmeny')'改成'$('#Movingmenu')' –