Question

我正在尝试在页面的各个部分之间进行平滑滚动。基本上我的目标是在这里产生类似的效果：http://diablomedia.com/ 到目前为止：我有菜单，不同的背景，我能够导航，从这里顺利滚动：http://css-tricks.com/snippets/jquery/smooth-scrolling/但背景是问题...它只是...不顺利，我无法解释它更清楚，所以我只是粘贴我的一些代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxx</title>

<style type="text/css">
html {
    background: #1d1d1d;
}

body {
    margin: 0;
    padding: 0;
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    background: #1d1d1d;
}

h1 {
    font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
    color: #fff;
    margin: 0;
    text-align: center;
    padding: 5px 0;
}

h1 small {
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.4em;
    display: block;
    color: #ccc;
}

.container {
    width: 100%;
    height: 80px;
    position: fixed;
    margin: 0 0 0 0;
    overflow: hidden;
    top: 0px;
    background: rgba(29, 29, 29, 0.85);
    z-index: 100;
}

.main_content1 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://www.mega-tapety.info/resize/sztuka-tapety3d-1600-1200-3422.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
    display: block;
}

.main_content2 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://www.tapety.nja.pl/images/wallpapers/26335506/Widoki/Niebo/17.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content3 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://i.pinger.pl/pgr496/a03b8c70001f8f5d490da42f/pobrano-z-tapety.pinger.pl-29.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content4 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://www.mega-tapety.info/wallpapers/krajobrazy/morzairzeki/390_4500_3.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content5 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://i.pinger.pl/pgr448/ca9845940015a295490d848a/pobrano-z-tapety.pinger.pl-1D.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content6 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://i.pinger.pl/pgr188/5b715190002669eb490d8488/pobrano-z-tapety.pinger.pl-1C.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content7 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background: url("http://skkf.net/pulpity/7tapeta.jpg") no-repeat fixed
        50% 0 #FFFFFF;
    position: relative;
}

.main_content8 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://zdjecia-fotografia.com/wp-content/uploads/2011/01/tapety-na-pulpit-samochody3.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
}

.text_container {
    width: 80%;
    position: absolute;
    margin-left: 10%;
    margin-top: 80px;
}

img {
    border: none;
}

ul#topnav {
    margin: 0 0 0 18%;
    padding: 0;
    list-style: none;
    font-size: 1.1em;
    clear: both;
    float: left;
    width: 60%;
    padding: 0;
}

ul#topnav li {
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    height: 40px;
}

ul#topnav a,ul#topnav span {
    padding: 10px 20px;
    float: left;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    clear: both;
    height: 20px;
    line-height: 20px;
}

ul#topnav a {
    color: #7bc441;
}

ul#topnav span {
    display: none;
}
</style>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document)
            .ready(
                    function() {

                        $("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

                        $("#topnav li").each(function() { //For each list item...
                            var linkText = $(this).find("a").html(); //Find the text inside of the a tag
                            $(this).find("span").show().html(linkText); //Add the text in the span tag
                        });

                        $("#topnav li").hover(function() { //On hover...
                            $(this).find("span").stop().animate({
                                marginTop : "-40" //Find the span tag and move it up 40 pixels
                            }, 250);
                        }, function() { //On hover out...
                            $(this).find("span").stop().animate({
                                marginTop : "0" //Move the span back to its original state (0px)
                            }, 250);
                        });

                        function filterPath(string) {
                            return string.replace(/^\//, '').replace(
                                    /(index|default).[a-zA-Z]{3,4}$/, '')
                                    .replace(/\/$/, '');
                        }
                        var locationPath = filterPath(location.pathname);
                        var scrollElem = scrollableElement('html', 'body');

                        $('a[href*=#]')
                                .each(
                                        function() {
                                            var thisPath = filterPath(this.pathname)
                                                    || locationPath;
                                            if (locationPath == thisPath
                                                    && (location.hostname == this.hostname || !this.hostname)
                                                    && this.hash.replace(/#/,
                                                            '')) {
                                                var $target = $(this.hash), target = this.hash;
                                                if (target) {
                                                    var targetOffset = $target
                                                            .offset().top;
                                                    $(this)
                                                            .click(
                                                                    function(
                                                                            event) {
                                                                        event
                                                                                .preventDefault();
                                                                        $(
                                                                                scrollElem)
                                                                                .animate(
                                                                                        {
                                                                                            scrollTop : targetOffset
                                                                                        },
                                                                                        1000,
                                                                                        function() {
                                                                                            location.hash = target;
                                                                                        });
                                                                    });
                                                }
                                            }
                                        });

                        // use the first element that is "scrollable"
                        function scrollableElement(els) {
                            for ( var i = 0, argLength = arguments.length; i < argLength; i++) {
                                var el = arguments[i], $scrollElement = $(el);
                                if ($scrollElement.scrollTop() > 0) {
                                    return el;
                                } else {
                                    $scrollElement.scrollTop(1);
                                    var isScrollable = $scrollElement
                                            .scrollTop() > 0;
                                    $scrollElement.scrollTop(0);
                                    if (isScrollable) {
                                        return el;
                                    }
                                }
                            }
                            return [];
                        }
                    });
</script>
</head>

<body>

    <div class="container">
        <h1>
            <small>Navatar.pl</small>
        </h1>
        <br />
        <ul id="topnav">
            <li><a href="#1">Dojedź szybciej</a>
            </li>
            <li><a href="#2">mCB</a>
            </li>
            <li><a href="#3">Pogadaj ze znajomymi</a>
            </li>
            <li><a href="#4">Check-in</a>
            </li>
            <li><a href="#5">Xplore</a>
            </li>
            <li><a href="#6">About</a>
            </li>
            <li><a href="#7">Cos</a>
            </li>
            <li><a href="#8">Jeszcze</a>
            </li>
        </ul>
    </div>
    <div class="main_content1" id="1"></div>
    <div class="main_content2" id="2"></div>
    <div class="main_content3" id="3"></div>
    <div class="main_content4" id="4"></div>
    <div class="main_content5" id="5"></div>
    <div class="main_content6" id="6"></div>
    <div class="main_content7" id="7"></div>
    <div class="main_content8" id="8"></div>
</body>
</html>

我知道它看起来很糟糕但我还在学习:)。

Answer 1

好吧，事情是：打开我的页面和暗黑破坏神的媒体页面...当你向下滚动，一个背景被另一个覆盖，同时在他们的网站有一个背景，比方说，就是被覆盖了

这是因为diablomedia.com正在使用视差滚动效果，允许不同的背景以不同的速度滚动，给你一种你所说的错觉。

以下是教程的链接以及有关此视差滚动技术的更多信息：One page website, vertical parallax

我希望这更像是你在寻找的东西。

jquery css在具有不同背景的部分之间平滑滚动

1 个答案: