我正在向上滑动一个宽度为 100%、高度为 100% 的容器，而另一个容器则离开屏幕进行导航，但只要动画开始，我的绝对定位元素就会变得可见。 this问题的第一个答案说有一行代码让溢出，隐藏，但它似乎不起作用。
$(document).ready(function(){
var hash = location.hash;
console.log(hash);
$(window).on("hashchange",function(){
hash=hash?hash:"#page1";
$(hash)
//I have tried adding
//.css("overflow","hidden");
.animate({height:"hide"});
hash = location.hash
$(hash)
//I have tried adding
//.css("overflow","hidden");
.animate({height:"show"});
});
hash?$(hash).toggleClass("page-active"):$("#page1").toggleClass("page-active");
});
这里是jsfiddle
最佳答案
这是因为您为 anchor 使用固定位置，因此它们相对于浏览器定位。而是使用 position:absolute 并使它们的父级 position:relative 使它们相对于它们的容器定位并平滑地出现在它们的容器中
$(document).ready(function() {
var hash = location.hash;
$(window).on("hashchange", function() {
hash = hash ? hash : "#page1";
$(hash)
//I have tried adding
//.css("overflow","hidden");
.animate({
height: "hide"
});
hash = location.hash
$(hash)
//I have tried adding
//.css("overflow","hidden");
.animate({
height: "show"
});
});
hash ? $(hash).toggleClass("page-active") : $("#page1").toggleClass("page-active");
});body,
html {
width: 100%;
height: 100%;
text-align: center;
margin:0;
}
.page1 {
width: 100%;
height: 100%;
background-color: cyan;
display: none;
position: relative;
}
.page2 {
width: 100%;
height: 100%;
background-color: lime;
display: none;
position: relative;
}
.page-active {
display: block;
}
a {
color: black;
position: absolute;
top: 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="page1" id="page1">
hello
<a href="#page2">go to page2</a>
</div>
<div class="page2" id="page2">
hi
<a href="#page1">go to page1</a>
</div>
</body>关于javascript - 动画一个绝对定位的 child 溢出的容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48270508/