CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jessica
jessica

Reputation: 495

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>

Upvotes: 0

Views: 33

Answers (1)

Maulik
Maulik

Reputation: 785

See the below Example :

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>

Upvotes: 1

Related Questions