jessica jessica - 1 month ago 6
CSS Question

div slides up and stays in position

I have a page with a header, a footer and a body, and i have a social media list in it what i want is when i open this page or reload it to make this social media list slide from the bottom and stay fixed in it's place, i tried something but it didn't work here is my code:



$(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>




Answer Source

See the below Example :

Fiddle

$(document).ready(function(){
	$(this).scroll(function(){
  $('.mydiv').css({
  	position:'fixed',
    bottom:'0',
    height:'auto',
    animation:'top 0.5s'
  });
  })
})
header{
background-color: red;
height: 100px
}
.mydiv{
  height:0;
}
@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; 
  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 content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 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>