我有一个包含页眉，页脚和正文的页面，并且我有一个社交媒体列表，当我打开此页面或重新加载它以使此社交媒体列表从底部滑动并固定在其中时，我想要的是地方，我尝试了一些东西，但是没有用，这是我的代码：
$(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>最佳答案
请参见以下示例：
Fiddle
$(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>