0

ある div を別の div の前にスクロールしようとしています。

しかし、私は少し立ち往生しています。

#wrapper div は、ロード時に #header div とオーバーラップします。

ここにフィドルがあります

また、それを Sublime Text 2 に転送すると、まったく機能しません。画像も表示されません。

これがST2で見ているものです。

HTML:

<!DOCTYPE HTML>
<html lang="en-UK">
    <head>
        <link rel="stylesheet" type="text/css" href="DivTest.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

var header_w=$('#header').height();

$('#wrapper').css('margin-top',header_w+'px');

$(window).resize(function()
{
    header_w=$('#header').height();

    $('#wrapper').css('margin-top',header_w+'px');
});
</script>
        <title></title>
    </head>
    <body>

    <div id="header">
        <img src="http://davesizer.com/blogs/wp-content/uploads/2010/03/eva_jump.jpg" alt="Dog">
    </div>
    <div id="wrapper">
    <div id="outer">
        <div id="content"></div>
    </div></div>

    </body>
</html>

CSS

html,
body
{
    margin:0;
    width:100%;
}
#header
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:auto;
    background-size:100%;
}
#header img
{
    width:100%;
    display:block;
    z-index:99;
}
#wrapper
{
    width:100%;
    background-color:lightgrey;
    z-index:100;
    position:absolute;
}
#outer
{
    margin:30px auto;
    padding-top:20px;
    position:relative;
    width:90%;
    height:1500px;
    background-color:red;
}
#inner
{
    margin:0 auto;
    width:200px;
    height:250px;
    background-color:lightblue;
    top:20px
}​
4

1 に答える 1

0

もしかしてこれ？

$(document).ready(function() {
    var header_h = $('#header').height();
    $('#wrapper').css('margin-top', header_h + 'px');
    $(window).scroll(function() {
        var header = $('#header');
        var opac = Math.max(0, 1 - $(window).scrollTop() / header.height());
        header.css('opacity', opac);
    });
});

そしてフィドル

于 2012-08-14T09:01:46.967 に答える