Question

HTML

<div id = "horizontal"></div>

CSS

#horizonatal {
    position:fixed;
    top:0;
} 


#horizonaltal { background-color: red; width: 150px; height:150px;}
body { height: 5000px; width: 5000px; }

我该怎么做？

Answer 1

由于您包含了jQuery标记，我将为您提供基于jQuery的解决方案。首先，让我们为示例设置一些结构：

HTML

<div class="sample red"></div>
<div class="sample green"></div>
<div class="sample blue"></div>
<br>
<div class="new">aaa</div>

三个“样本”div是我们滚动时会生成动画的div。 “新”是内容。

CSS

.sample {
    width:100px;
    height:300px;
    position:fixed;
    left:-102px;
    background:red
}
.green {
    background:green; top: 30px;
}
.blue {
    background:blue; top: 60px;
}
.new {
    margin-top:1000px
}

这确保实际上可以进行一些滚动（1000px-高内容）并设置样本div的样式和位置（固定位置，所有停靠在左侧，不同的背景颜色和垂直位置）。

现在，我们可以听取滚动事件并相应地制作动画：

脚本

// cancels any existing animations 
// and animates the "slide out" transition for all samples
function hideDivs() {
    $('.sample').stop().animate({
        left: '-102px'
    }, 1000);
}

// slides in various samples for various scroll positions
// hides any that aren't appropriate for the current position
function showDivs() {
    hideDivs();
    var top = $(document).scrollTop();
    if ( top >= 100 && top < 300 ) {
        $('.red').stop().animate({
            'left': '0px'
        }, 1000);
    } else if (top >= 300 && top < 500) {
        $('.green').stop().animate({
            'left': '0px'
        }, 1000);
    } else if (top >= 500) {
        $('.blue').stop().animate({
            'left': '0px'
        }, 1000);
    } 

}

// scroll events get fired a LOT
// this will end up being very jerky and distracting if we 
// trigger the animation every time the event fires
// So wait for a split-second before starting the animations,
// resetting the timer on each scroll event to ensure that
// the animation doesn't start until the scrolling has stopped.
var timer = null;
$(window).scroll(function () {
  clearTimeout(timer);
  timer = setTimeout(showDivs, 300);
});

此示例比您要求的更多，因为它会根据滚动位置设置三个单独的叠加层。您可以根据需要对其进行简化 - 它应该是相当不言自明的。

如果您希望在行动中看到它，那么这是一个小提琴：http://jsfiddle.net/G4t4f/4/

当页面向下滚动时，如何设置div的动画水平移动？

1 个答案:

HTML

CSS

脚本