如何使滚动只在一个元素中工作？

我正在尝试创建一个顶部有图像的网页。当用户向上滚动时，图像应该稍微上升而其他元素被阻止。只要该图像到达所需的位置，其他元素也可以向上或向下滚动。这是主要想法：用户滚动，图像移动。用户保持滚动，元素也移动。这是我到目前为止有：如何使滚动只在一个元素中工作？

var lastScrollTop = 0; 

$(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 

    if (st > lastScrollTop){ 
    $("#ballonImg").css("top", "-=5px"); 
    } else { 
     $("#ballonImg").css("top", "+=5px"); 
    } 
    lastScrollTop = st; 
});

和HTML：

<div id="top"> 
    <div id="images"> 
    <img id="ballonImg"src="http://i.imgur.com/rMm5gCy.jpg"/> 
    <img src="http://i.imgur.com/l3GI35D.png"/> 
    </div> 
    </div> 

    <div id="cenas"></div>

来源

2016-04-03 Nicki Reds

的jsfiddle将是巨大的 –

这是我codepen：http://codepen.io/Nicki_Reds/pen/jqGeEm –

您应该使用CSS定位。固定位置，绝对位置，相对位置和静态位置都可以用于此目的。您还应该考虑将静态图像设置为div的背景，并将其他图像放在其中，但将z-index设置为2（或大于1的任何值）。

来源

2016-04-03 02:09:16

我已经创建了它，它的工作原理与您所描述的一样。

我使用jquery-mousewheel获取mousewheel事件，并使用deltaY来检查用户是否正在向上或向下滚动。然后使用deltaFactor来确定用户有多少轮。使用该值更改图像的top值。

我还保留了一个minTop和maxTop值来保持图像在这个范围之间。然后，当图像达到minTop值时，我已启用页面上的溢出，以便页面照常滚动。

$(document).ready(function() { 
 
    var minTop = -200; 
 
    var maxTop = 50; 
 
    $(window).on('mousewheel', function(event) { 
 
    var top = Number($('.imgHolder').css('top').replace('px', '')); 
 
    console.log(top, minTop) 
 
    if (top + event.deltaFactor * (event.deltaY < 0 ? -1 : 1) >= minTop) { 
 
     $('#container').addClass('overflowHidden'); 
 
     top = top + event.deltaFactor * (event.deltaY < 0 ? -1 : 1); 
 
     top = top < minTop ? minTop : top; 
 
     top = top > maxTop ? maxTop : top; 
 
     $('.imgHolder').css('top', top); 
 
    } else { 
 
     $('#container').removeClass('overflowHidden'); 
 
    } 
 
    }); 
 
})

body { 
 
    margin: 0; 
 
} 
 
.content { 
 
    width: 30%; 
 
    margin: auto; 
 
} 
 
.imgHolder { 
 
    width: 80%; 
 
    height: auto; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 10%; 
 
} 
 
img { 
 
    max-width: 100%; 
 
} 
 
#container.overflowHidden { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0px; 
 
    top: 0px; 
 
    overflow: hidden; 
 
}

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="container" class="overflowHidden"> 
 
    <div class="content"> 
 
     On July 1, 1963, Project MAC (the Project on Mathematics and Computation, later backronymed to Multiple Access Computer, Machine Aided Cognitions, or Man and Computer) was launched with a $2 million grant from the Defense Advanced Research Projects Agency 
 
     (DARPA). Project MAC's original director was Robert Fano of MIT's Research Laboratory of Electronics (RLE). Fano decided to call MAC a "project" rather than a "laboratory" for reasons of internal MIT politics—if MAC had been called a laboratory, 
 
     then it would have been more difficult to raid other MIT departments for research staff. The program manager responsible for the DARPA grant was J.C.R. Licklider, who had previously been at MIT conducting research in RLE, and would later succeed 
 
     Fano as director of Project MAC. Project MAC would become famous for groundbreaking research in operating systems, artificial intelligence, and the theory of computation. Its contemporaries included Project Genie at Berkeley, the Stanford Artificial 
 
     Intelligence Laboratory, and (somewhat later) University of Southern California's (USC's) Information Sciences Institute. An "AI Group" including Marvin Minsky (the director), John McCarthy (who invented Lisp) and a talented community of computer 
 
     programmers was incorporated into the newly formed Project MAC. It was interested principally in the problems of vision, mechanical motion and manipulation, and language, which they view as the keys to more intelligent machines. In the 1950s - 1970s 
 
     the AI Group shared a computer room with a computer (initially a PDP-6, and later a PDP-10) for which they built a time-sharing operating system called ITS.[citation needed] The early Project MAC community included Fano, Minsky, Licklider, Fernando 
 
     J. Corbató, and a community of computer programmers and enthusiasts among others who drew their inspiration from former colleague John McCarthy. These founders envisioned the creation of a computer utility whose computational power would be as reliable 
 
     as an electric utility. To this end, Corbató brought the first computer time-sharing system, CTSS, with him from the MIT Computation Center, using the DARPA funding to purchase an IBM 7094 for research use. One of the early focuses of Project MAC 
 
     would be the development of a successor to CTSS, Multics, which was to be the first high availability computer system, developed as a part of an industry consortium including General Electric and Bell Laboratories. In 1966, Scientific American featured 
 
     Project MAC in the September thematic issue devoted to computer science, that was later published in book form. At the time, the system was described as having approximately 100 TTY terminals, mostly on campus but with a few in private homes. Only 
 
     30 users could be logged in at the same time. The project enlisted students in various classes to use the terminals simultaneously in problem solving, simulations, and multi-terminal communications as tests for the multi-access computing software 
 
     being developed.</div> 
 

 
    <div class="imgHolder"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Stata_Center1.jpg/800px-Stata_Center1.jpg" /> 
 
    </div> 
 
</body> 
 
</div> 
 

 
</html>

来源

2016-04-03 03:37:16 Roy

如何使滚动只在一个元素中工作？

回答

相关问题