如何将动画div限制在网页部分？

Question

嗨，我现在在一个视差网站上工作。我想添加一个图片，移动作为用户的scrolls...but只在一个网站的一部分下来。因此，4节down..the图像是there...it移动，因为用户滚动down...then消失在第5节后，我们不再看到它。

我试着做一个类似于这个网站的效果：Website

当您滚动down...you时，请参阅div之间的“约”移动。我想要做到这一点。

当我这样做的时候，it...it会出现在第一部分的顶部，并一直停留在屏幕上。

这是一个示例JSfiddle。它只显示网站的一部分：fiddle

我知道这和定位有关。但我希望它留在设计信息中心，而不是定位在整个页面。

​

// Create cross browser requestAnimationFrame method:
window.requestAnimationFrame = window.requestAnimationFrame
                               || window.mozRequestAnimationFrame
                               || window.webkitRequestAnimationFrame
                               || window.msRequestAnimationFrame
                               || function(f){setTimeout(f, 1000/60)}

var bubble1 = document.getElementById('bubbles1')
var bubble2 = document.getElementById('bubbles2')
var fish = document.getElementById('fish')

var scrollheight = 	document.body.scrollHeight // height of entire document
var windowheight = window.innerHeight // height of browser window


function parallaxbubbles(){
	var scrolltop = window.pageYOffset // get number of pixels document has scrolled vertically
	var scrollamount = (scrolltop / (scrollheight-windowheight)) * 100 // get amount scrolled (in %)
	bubble1.style.top = scrolltop * .2 + 'px' // move bubble1 at 20% of scroll speed
	bubble2.style.top = -scrolltop * .5 + 'px' // move bubble2 at 50% of scroll speed
	fish.style.left = -100 + scrollamount + '%'

}

window.addEventListener('scroll', function(){ // on page scroll
	requestAnimationFrame(parallaxbubbles) // call parallaxbubbles() on next available screen repaint
}, false)

window.addEventListener('resize', function(){ // on window resize
	var scrollamount = (scrolltop / (scrollheight-windowheight)) * 100 // get amount scrolled (in %)
	fish.style.left = -100 + scrollamount + '%'
}, false)

.cd-main-content {
  /* I need to assign a min-height to the main content so that the children can inherit it*/
  height: 60%;
  position: relative;
  /*z-index: 1;*/
}

.cd-fixed-bg {
  position: relative;
  min-height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 1170px;
  text-align: center;
  font-size: 30px;
  font-size: 1.875rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: white;
}
.cd-fixed-bg.cd-bg-1 {
  background-image: url("../images/content/grey.png");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../images/content/cd-background-2.jpg");
}

@media only screen and (min-width: 768px) {
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 36px;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-fixed-bg {
    background-attachment: fixed;
  }
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 48px;
    font-weight: 300;
  }
}

.cd-scrolling-bg {
  position: relative;
  min-height: 50%;
  padding: 4em 0;
  line-height: 1.6;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
/*.cd-scrolling-bg.cd-color-1 {
  background-color: #ffffff;
  color: #000000;
}*/
.cd-scrolling-bg.cd-color-2 {
  background-color: #1c1c1c;
  
  background: rgba(48,48,48,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(48,48,48,1)), color-stop(0%, rgba(56,56,56,1)), color-stop(46%, rgba(28,28,28,1)), color-stop(100%, rgba(10,10,10,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
background: radial-gradient(ellipse at center, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#0a0a0a', GradientType=1 );
  
  
  
 
}
.cd-scrolling-bg.cd-color-3 {
  background-color: #00161B;
  color: #3d3536;
}
@media only screen and (min-width: 768px) {
  .cd-scrolling-bg {
    padding: 8em 0;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2;
    font-weight: 300;
  }
}





#bubbles1{
width: 100%;
height: 100%;
bottom: 0;
left: 0;
position: absolute;
z-index: -1;
background: url(http://www.i2clipart.com/cliparts/9/2/6/b/clipart-bubble-926b.png) 5% 80% no-repeat;
}

/*
#bubbles2{
background: url(bubbles3.png) 95% 90% no-repeat;
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<main class="cd-main-content parallax">
	

		<div class="cd-scrolling-bg cd-color-2 parallax">
			<div class="cd-container">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem. Voluptates quibusdam odit odio incidunt consequatur, consectetur aspernatur optio vitae molestias, quas repellendus fugit ullam culpa, eligendi et dignissimos voluptatibus illum? Molestias aliquam nostrum quasi ipsa culpa, iusto explicabo ut error, consequuntur enim temporibus, adipisci tempora voluptate, id consequatur mollitia eveniet blanditiis. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!
				</p>
			</div> <!-- cd-container -->
		</div> <!-- cd-scrolling-bg -->

		<div class="cd-scrolling-bg cd-color-3">
             <div id="bubbles1"></div>
			<h2>Lorem ipsum dolor sit amet.</h2>
		</div> <!-- cd-fixed-bg -->

		<div class="cd-scrolling-bg cd-color-3">
			
					 <div class="container">
                         <!--this is the bubble image-->
                        
					
        <div class="row-fluid">
            <div class="span3">
                <div class="text-widget widget">
                    <h4>About Me</h4>
                    <p>Lorem ipsum dolor nonus amet, consectetur ex adipisicing elit, sed do eiusmod incididunt ut labore et
                        dolore magna aliqua. Ut enim ad ex minim veniam, quis nostrud lorem exercitation ullamco laboris
                        nisi ut aliquip nesciunt aliqua.</p>
						
						
                </div>
            </div>
			
	
            <div class="span3">
               
            </div>
            <div class="span3">
                
            </div>
            <div class="span3">
               
            </div>
			
		
        </div>
		
		
    </div>
					
	
		</div>

​

Answer 1

首先，我们必须计算每个部分的相对滚动位置。我们通过计算窗口底部离剖面顶部有多远才能做到这一点。当区段出现在窗口底部时，从0开始，当区段顶部移动(WINDOW_HEIGHT + SECTION_HEIGHT)像素时，以1结束。此时，该部分在窗口中不再可见。

就这样。然后，我们使用区段相对滚动位置，通过设置它们的css顶部位置来移动气泡。

我们可以玩它更多，并引入选项，使我们可以设置时，气泡出现和消失的部分相对滚动位置。因此，例如，我们想要一个气泡出现时，一个区段是0.5滚动和消失时，该部分是0.8滚动。我们通过操纵气泡必须传播的路径(和顶部偏移量)的长度来实现这一点。

有关详细信息，请参阅此JsFiddle：http://jsfiddle.net/jkk7t7Lk/10/ (注:本例使用jQuery)

Javascript

function moveBubbles() {
    var windowHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var scrollBottom = scrollTop + windowHeight;

    $('.section').each(function() {
        var sectionHeight = $(this).outerHeight(true);

        var sectionTop = $(this).position().top;
        var sectionBottom = sectionTop + sectionHeight;

        var in_window = (sectionTop >= scrollTop && sectionTop <= scrollBottom) 
                        || (sectionBottom >= scrollTop && sectionBottom <= scrollBottom) 
                        || (sectionTop <= scrollTop && sectionBottom >= scrollBottom);

        if (in_window)
        {                
            var pathHeight = sectionHeight + windowHeight;
            var position = (scrollBottom - sectionTop) / pathHeight; // <0, 1>

            $(this).find('.bubble').each(function() {
                var bubbleHeight = $(this).outerHeight(true);
                var start = parseFloat($(this).data('start'));                
                var speed = 1 / (parseFloat($(this).data('end')) - start);                
                var bubble_path = (sectionHeight + bubbleHeight) * speed;                
                var offset_top =  start * bubble_path;

                var top = bubble_path * position - bubbleHeight - offset_top;

                $(this).css('top', top);
            });
        }
    });
}

$(document).ready(moveBubbles);
$(window).resize(moveBubbles);
$(window).scroll(moveBubbles);

HTML

<div class="section">
        <span class="bubble" style="left: 50px;" data-start="0.5" data-end="0.75"></span>
    Section 1
</div>
<div class="section">
    <span class="bubble" style="left: 30px;" data-start="0.3" data-end="0.6"></span>
    <span class="bubble" style="left: 100px;" data-start="0.4" data-end="1"></span>
    <span class="bubble" style="left: 200px;" data-start="0" data-end="1"></span>
    <span class="bubble" style="left: 300px;" data-start="0.2" data-end="0.55"></span>
    Section 2
</div>
<div class="section">
            <span class="bubble" style="left: 50px;" data-start="0.7" data-end="0.71"></span>
    Section 3
</div>
<div class="section">
    Section 4
</div>

CSS

.section {
    height: 100vh;
    border: 1px solid red;
    position: relative;
    overflow: hidden;
}

.bubble {
    background-image: url(http://www.i2clipart.com/cliparts/9/2/6/b/clipart-bubble-926b.png);
    width: 128px;
    height: 128px;
    position: absolute;
    display: block;
}