如何使滾動只在一個元素中工作？

我正在嘗試創建一個頂部有圖像的網頁。當用戶向上滾動時，圖像應該稍微上升而其他元素被阻止。只要該圖像到達所需的位置，其他元素也可以向上或向下滾動。這是主要想法：用戶滾動，圖像移動。用戶保持滾動，元素也移動。這是我到目前爲止有：如何使滾動只在一個元素中工作？

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

如何使滾動只在一個元素中工作？

回答

相關問題