Question

我正在使用paralax滚动进行概念证明。我在页面右侧有3个图像链接到锚点以浏览此单页面网站。如果我将#buttons div放在视差容器内，按钮会滚动并保留页面底部的链接。如果我将它们留在那个div之外，即使我设置了固定的位置，它们也会滚动。它在FF中非常完美，但在chrome中却不是。我需要的只是一个带有视差滚动的简单页面，页面右侧的三个按钮在屏幕上保持相同的位置，无论您在哪里滚动。为什么它在FF而不是chrome中工作？我的代码在

之下

    <!DOCTYPE html>
<html>

<head>
<meta content="en-us" http-equiv="Content-Language">
<meta charset="utf-8">
<meta content="A high performance parallax scrolling example." name="description">
<meta content="Parallax Scrolling Example" name="title">
<title>Parallax Scrolling Example</title>
<style>
body {
    padding: 45px;
    background-color: #010001;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    line-height: 40px;
    padding: 30px;
    margin-right: 60px;
    color: #FFFFFF;
}
p span {
    background-color: rgba(1, 0, 1, .85);
}
a {
    color: #AFDBF2;
}
h1 {
    text-transform: capitalize;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 40px;
    padding: 10px;
    margin: 0px;
    background-color: rgba(178, 45, 0, .75);
    color: #EEE;
}
#parallaxContainer {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}
#parallaxContainer img {
    width: 100%;
    height: auto;
}
#buttons {
    position:fixed;
    bottom:100px;
    right:10px;
}

</style>
</head>

<body>

<div id="parallaxContainer">
    <img src="http://4.bp.blogspot.com/_2mN0xk6r-Eo/TEh9lXrojWI/AAAAAAAAAuk/mDn5MDGetBE/s1600/0014.jpg">

</div>
    <div id="buttons">
        <div id="button1"><a href="#anch1"><img src="images/button.png"></a></div>
        <div id="button2"><a href="#anch2"><img src="images/button.png"></a></div>
        <div id="button3"><a href="#anch3"><img src="images/button.png"></a></div>
    </div>
    <div id="content">

<h1>Some Random Star Trek Quotes</h1>
<p><span>Captain Jean-Luc Picard: Duty. A starship captain's life is filled with solemn duty. I have commanded men in battle. I have negotiated peace treaties between implacable enemies. I have represented the Federation in first contact with twenty-seven alien species. But none of this compares with my solemn duty today... as best man. Now, I know, on an occasion such as this, it is expected that I be gracious and fulsome in my praise on the wonders of this blessed union, but have the two of you considered what you were doing to me? Of course you're happy, but what about *my* needs? This is all a damned inconvenience. While you're happily settling in on the Titan, I will be training my new first officer. You all know him. He's a tyrannical martinet who will never, *ever*, allow me to go on away missions. 
Data: That is the regulation, sir. Starfleet code section 12, paragraph 4... 
Captain Jean-Luc Picard: Mr. Data... 
Data: Sir? 
Captain Jean-Luc Picard: Shut up. 
Data: Yes, sir. 
Captain Jean-Luc Picard: [turning to the wedding guests] 15 years I've been waiting to say that. </p></span></p>
<br>
    </div>

<script src="http://www.kirupa.com/prefixfree.min.js"></script>
<script>

var requestAnimationFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame ||
                            window.msRequestAnimationFrame;

var transforms = ["transform", 
                  "msTransform", 
                  "webkitTransform", 
                  "mozTransform", 
                  "oTransform"];

var transformProperty = getSupportedPropertyName(transforms);

var imageContainer = document.querySelector("#parallaxContainer");

var scrolling = false;
var mouseWheelActive = false;

var count = 0;
var mouseDelta = 0;


//
// vendor prefix management
//
function getSupportedPropertyName(properties) {
    for (var i = 0; i < properties.length; i++) {
        if (typeof document.body.style[properties[i]] != "undefined") {
            return properties[i];
        }
    }
    return null;
}

function setup() {
    window.addEventListener("scroll", setScrolling, false);

    // deal with the mouse wheel
    window.addEventListener("mousewheel", mouseScroll, false);
    window.addEventListener("DOMMouseScroll", mouseScroll, false);

    animationLoop();
}
setup();

function mouseScroll(e) {
    mouseWheelActive = true;

    // cancel the default scroll behavior
    if (e.preventDefault) {
        e.preventDefault();
    }

    // deal with different browsers calculating the delta differently
    if (e.wheelDelta) {
        mouseDelta = e.wheelDelta / 120;
    } else if (e.detail) {
        mouseDelta = -e.detail / 3;
    }
}

//
// Called when a scroll is detected
//
function setScrolling() {
    scrolling = true;
}

//
// Cross-browser way to get the current scroll position
//
function getScrollPosition() {
    if (document.documentElement.scrollTop == 0) {
        return document.body.scrollTop;
    } else {
        return document.documentElement.scrollTop;
    }
}

//
// A performant way to shift our image up or down
//
function setTranslate3DTransform(element, yPosition) {
    var value = "translate3d(0px" + ", " + yPosition + "px" + ", 0)";
    element.style[transformProperty] = value;
}

function animationLoop() {
    // adjust the image's position when scrolling
    if (scrolling) {
        setTranslate3DTransform(imageContainer, 
                                -1 * getScrollPosition() / 2);
        scrolling = false;
    }

    // scroll up or down by 10 pixels when the mousewheel is used
    if (mouseWheelActive) {
        window.scrollBy(0, -mouseDelta * 10);
        count++;

        // stop the scrolling after a few moments
        if (count > 20) {
            count = 0;
            mouseWheelActive = false;
            mouseDelta = 0;
        }
    }

    requestAnimationFrame(animationLoop);
}

</script>
</body>
</html>

Answer 1

我认为这是 -webkit-transform：translate3d 的问题，因为它也无法在 opera 和 chrome 中工作，而且 > opera 和 chrome 使用webkit转换。另一方面，它正在使用 IE10 和 FF ，因为它们都使用 transform：translate3d

为了方便起见，您可以使用jquery库来实现视差效果，例如： skrollr.js或stellar.js可以轻松快速地创建视差。

Answer 2

这是一个CSS问题。我为按钮添加了一个z-index，一切都很好。完成的代码在jsfiddle.net/ZYQBD/4，感谢所有帮助过的人！

css固定位置不适用于chrome

2 个答案: