我有一个带有页眉、页脚和正文的页面，其中有一个社交媒体列表我想要的是当我打开此页面或重新加载它时使此社交媒体列表从底部滑动并停留固定在它的位置，我尝试了一些但它没有用这是我的代码:
$(function(){
$(".mydiv").addClass("active");
console.log($(".mydiv"));
});header{
background-color: red;
height: 100px
}
footer{
background-color: red;
height: 100px
}
div{
transition-property: margin-top;
transition-duration: 2s;
-webkit-transition-property: margin-top;
-webkit-transition-duration: 2s;
margin-top:1000px;
}
div.active
{
margin-top:0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header></header>
<body>
<p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
<div class="mydiv">
<ul>
<li><a href="#">Social link 1</a></li>
<li><a href="#">Social link 2</a></li>
<li><a href="#">Social link 3</a></li>
<li><a href="#">Social link 4</a></li>
</ul>
</div>
</body>
<footer></footer>最佳答案
看下面的例子:
$(document).ready(function(){
$(this).scroll(function(){
$('.mydiv').css({
position:'fixed',
bottom:'0',
height:'auto',
animation:'top 0.5s'
});
if($(this).scrollTop() > '360'){
$('.mydiv').css({
position:'relative'
});
}
})
})header{
background-color: red;
height: 100px
}
@keyframes top{
from{bottom:-30px;}
to{bottom:0px;}
}
footer{
background-color: red;
height: 100px
}
div{
transition-property: margin-top;
transition-duration: 2s;
-webkit-transition-property: margin-top;
-webkit-transition-duration: 2s;
}
div.active
{
margin-top:0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header></header>
<body>
<p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
<div class="mydiv">
<ul>
<li><a href="#">Social link 1</a></li>
<li><a href="#">Social link 2</a></li>
<li><a href="#">Social link 3</a></li>
<li><a href="#">Social link 4</a></li>
</ul>
</div>
</body>
<footer></footer>关于javascript - div 向上滑动并停留在原位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45844335/