Question

所以我对编码比较陌生，并且一直致力于一个项目。在目前的状态下，我发现将屏幕外导航与视差滚动相结合很困难。我已经尝试在包装器中创建一个div（无效），改变HTML中视差滚动的位置（使一个特征工作，或另一个），并改变css定位（通常只是使页面融化，一些异常值）

最终目标是让视差滚动在导航广场下方运行，侧面菜单也会移动背景。

代码如下，占位符图片和信息对我尝试过的事情做了一些破坏性修改。就像我说的那样，我很新，所以如果有什么不妥，我会非常感谢你的帮助。

我猜我忽略了一些愚蠢的东西，或者我正在尝试错误的解决方案组合。

感谢您的帮助。

HTML：

<head>
    <meta charset="utf-8"/>
    <title>What is Reality?</title>
    <link rel="stylesheet" href="websitebasefinal.css"/>
    <link rel="stylesheet" href="tennants.css"/>
    <script language="javascript" src="websitefinal.js"></script>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu">
    <script src="jquery-3.3.1.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>

<body>


        <div id="side-menu" class="side-menu">          


        <a href="websitebasefinal.html">Home</a>
        <a href="">hai</a>
        <a href="">mark</a>
        <a href="">!</a>
        <br>
        <br>
        <a href="" id="second-links">Contact Us</a>
        </div>

        <div id="search-menu" class="search-menu">

         <p>What are you <br>looking for?<br>
         <input type="text" placeholder="...?">
        </div>


    <div id="wrapper">
        <div id="insidewrapper">

            <div id="container-one">

                <div id="container-menu" onclick="openmenuside()">
                    <i class="fas fa-align-left fa-lg" id="menubutton" style="color:#f1f1f1"></i>

                    <script>
                    $('#container-menu').click(function(){
                    $('#menubutton').toggleClass('fas fa-align-left fa-lg fas fa-times fa-lg')
                    });
                    </script>
                </div>

                <div id="container-search" onclick="opensearchside()">
                    <i class="fas fa-search fa-lg" id="searchbutton" style="color:#f1f1f1"></i>

                    <script>
                    $('#container-search').click(function(){
                    $('#searchbutton').toggleClass('fas fa-search fa-lg fas fa-times fa-lg')
                    });
                    </script>
                    </div>
            </div>

            <div id="tenantcontainer">
                <div class="bgimage1">
                    <div class="caption">
                    <span class="border">Scroll down</span>
                    <div class="content"><p>Here's where we talk about what's what daddy-o</div>
                </div>
                </div>

                <div class="bgimage2">
                    <div class="caption">
                    <span class="border">Scroll down</span>
                    <div class="content"><p>Here's where we talk about what's what daddy-o</div>
                </div>
                </div>
            </div>


        </div>
    </div>

</div>
</div>
</body>

CSS：

.bgimage1, .bgimage2, .bgimage3{
    position:relative;
    /*background-attachment:fixed;*/
    background-position:center;
    /*background-repeat:no-repeat;*/
    background-size:cover;
    z-index:0;
    top:0;
    left:0;

}

.bgimage1{
    background-image:url("evelynnteaser-1920X1080.jpg");
    height:100%;
}

.bgimage2{
    background-image:url("2017-eclipse-photos-01.jpg");
    height:100%;
}

.bgimage3{
    background-image:url("evelynnteaser-1920X1080.jpg");
    height:100%;
}

.caption {
  position: absolute;
  left: 0;
  top: 25%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

.content, .content p{
    position: absolute;
    margin-top:70px;
    color:white;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      color:#f1f1f1;
}

JS：

function openmenuside(){
    var side=document.getElementById("side-menu");
    var container=document.getElementById("wrapper");
    if (side.style.width=='320px'){
        side.style.width="0px";
        container.style.marginLeft="-620px";    
    }else{
        side.style.width="320px";
        container.style.marginLeft="-340px";
    }

}

function opensearchside(){
    var side=document.getElementById("search-menu");
    var container=document.getElementById("wrapper");
    if (side.style.width=='320px'){
        side.style.width="0px";
        container.style.marginLeft="-620px";    
    }else{
        side.style.width="320px";
        container.style.marginLeft="-900px";
    }

}

结合页面导航幻灯片和视差滚动？

0 个答案: