Question

我有一个带有标题，页脚和正文的页面，我有一个社交媒体列表，我想要的是当我打开此页面或重新加载它以使此社交媒体列表从底部滑动并保持固定在它的地方，我尝试了一些东西，但它没有在这里工作是我的代码：

＆＃13;

$(function(){
    
    $(".mydiv").addClass("active");
    console.log($(".mydiv"));
    
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

见下面的例子：

Fiddle

＆＃13;

$(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'
      });
    }
  })
})

＆＃13;

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;
}

＆＃13;

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

＆＃13;

div向上滑动并保持原位

1 个答案: