Question

（仔细阅读抽搐的触发手指下注者）

我想在滚动到某一点后，让div和它的内容向下滑动。我看了很多，但我只能找到如何向下滑动div，但其内容是静态的。换句话说，div向下滑动以显示其内容，但其内容不会滑动。

这是使用JsFiddle ......

... CSS

body {
    height: 10000px;
}

.fixedDiv {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
}

header {
    height: 300px;
    border: 1px solid black;
}

JAVASCRIPT

// Get the headers position from the top of the page, plus its own height
var startY = 500;

$(window).scroll(function(){
    checkY();
});

function checkY(){
    if( $(window).scrollTop() > startY ){
        $('.fixedDiv').slideDown();
    }else{
        $('.fixedDiv').slideUp();
    }
}

// Do this on load just in case the user starts half way down the page
checkY();

如您所见，div的内容不会移动。只有div本身。我需要将内容与div一起移动，而不是仅仅由移动的div显示。

Answer 1

您可以使用类和过渡来更改div的位置，使其看起来像下降

参见工作示例：

// Get the headers position from the top of the page, plus its own height
var startY = 500;

$(window).scroll(function() {
  checkY();
});

function checkY() {
  if ($(window).scrollTop() > startY) {
    $('.fixedDiv').addClass("slide");
  } else {
    $('.fixedDiv').removeClass("slide");
  }
}

// Do this on load just in case the user starts half way down the page
checkY();

body {
  height: 10000px;
}

.fixedDiv {
  visibility: hidden;
  position: fixed;
  top: -10px;
  left: -0;
  transition: all .5s;
}

.slide {
  visibility: visible;
  top: 0;
}

header {
  height: 300px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='fixedDiv'>Here is a fixed div.</div>
<header>Here is the header! It is kinda tall to demonstrate...</header>

滚动后如何向下滑动div及其内容

1 个答案: