Question

所以我试图创建一个模拟多个超链接的网站，同时将固定内容保存在外面。

到目前为止，我的主网页已经有了这个

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link rel="stylesheet" type="text/css" href="CSS-JS/main.css" />
    </head>
    <body>
        <div id="banner" class='page-padding'>
            <div id="in-page-nav">
                    <a href="#about">About</a>
                    <a href="#portfolio">Portfolio</a>
                    <a href="#contact">Contact</a> 
            </div>
        </div>    

    <div id="persistentNav" onmouseover="this.id='persistentNavHover';" onmouseout="this.id='persistentNav';">

    <ul id="leftNav">
        <li><a class="nav" href="#Home">Homepage</a></li>
        <li><a class="nav" href="#Article1">Article 1</a></li>
        <li><a class="nav" href="#Article2">Article 2</a></li>
        <li><a class="nav" href="#Article3">Article 3</a></li>
    </ul>

    </div>

    <div id="page1-background">

            <div id="page1">
                    <a name="about"></a>
                    <div class="page-padding"></div>
                    <p>Article One</p>
            </div> <!--END page1-->
    </div>

    <div id="page-wrap">
            <div id="page2">
                    <a name="portfolio"></a>
                    <div class="page-padding"></div>
                    <p>Article 2</p>
                    <video width="100%" height="240" controls>
                        <source src="" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
            </div> <!--END page2-->

            <div id="page3">
                    <a name="contact"></a> 
                    <div class="page-padding"></div>
                    <p>Article</p>
                    <div id="wizards">

                    <ul>
                            <li><a href="images/dumbledore.jpg"><img src="images/dumbledore-sm.jpg" alt="Dumbledore" /></a></li>
                            <li><a href="images/merlin.jpg"><img src="images/merlin-sm.jpg" alt="Merlin" /></a></li>
                            <li><a href="images/gandalf.jpg"><img src="images/gandalf-sm.jpg" alt="Gandalf" /></a></li>
                            <li><a href="images/harry-potter.jpg"><img src="images/harry-potter-sm.jpg" alt="Harry Potter" /></a></li>
                    </ul>

            </div>
            </div> <!--END page3-->

    </div> <!--END page-wrap-->    

    <div id="footer">
    <div id="none">
        <a href="#about">Footer</a>
        <a href="#portfolio">Footer</a>
        <a href="#contact">Footer</a> 
    </div>
    </div>
    </body>
</html>

这是我的CSS文件

/* 
    Document   : main
    Created on : 19-Mar-2014, 11:16:27
    Author     : dan
    Description:
        Purpose of the stylesheet follows.
*/
*{ margin:0 auto;}

body {
    margin: 0 auto; 
    font-family:georgia, times, serif; 
    height:2000px;
    }

#banner {
        position: fixed;
    top:0px;
    left:0%;
        right:0px;
    background: white; 
    height:250px; 
    width:1000px;
        padding-left: 20px;
        padding-right: 20px;
        }

#nav {
    margin-left:50px;
    margin-top:10px;
    word-spacing:20px;
}

#in-page-nav {
        text-align: center;
    margin-left:50px;
    margin-top:45px;
    word-spacing:20px;
}

#page1-background {
    height: 1100px;
    width: 100%;
    background: url('Pictures/Middle-earth-Shadow-of-Mordor-7.jpg') no-repeat;
        background-size: 100%, 100%;
    padding-top: 0px;
    }

#page1 {
    height:1100px;
    width:1000px;
    background:#afc9ff;
    padding-top:250px;
        padding-left: 20px;
        padding-right: 20px;
    }

#page2 {
    height:1100px;
    width:1000px;
    background:#777cdc;
    padding-top:150px;
        padding-left: 20px;
        padding-right: 20px;
    }

#page3 {
    height:1100px;
    width:1000px;
    background:#9b70c0;
    padding-top:150px;
        padding-left: 20px;
        padding-right: 20px;
    }

#footer {
    position:fixed;
    bottom:0px;
    left:0px;
    background:#666; 
    height:70px; 
    width:100%;
    }

.page-padding {height:90px; width:100%;}


#persistentNav {
width: 250px;
position: fixed;
left: -250px;
top: 50%;
-webkit-transition: ease 0.3s;
-moz-transition: ease 0.3s;
-o-transition: ease 0.3s;
-ms-transition: ease 0.3s;
transition: ease 0.3s;
margin-top: -245px;
background-color: rgba(0, 0, 0, 0.9);
z-index: 900;
}

#persistentNavHover {
width: 250px;
position: fixed;
top: 50%;
margin-top: -245px;
-webkit-transition: ease 0.3s;
-moz-transition: ease 0.3s;
-o-transition: ease 0.3s;
-ms-transition: ease 0.3s;
transition: ease 0.3s;
background-color: rgba(0, 0, 0, 0.9);
z-index: 900;
}

ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

ul {
list-style: none;
}

#leftNav li a {
color: #888;
background-color: rgba(0, 0, 0, 0.9);
width: 266px;
height: 24px;
padding-left: 24px;
padding-top: 15px;
display: block;
border-bottom: 1px solid #222;
border-right: 1px solid #222;
letter-spacing: 0.10em;
text-transform: uppercase;
font-size: 12px;
text-align: left;
overflow: hidden;
zoom: 1;
-webkit-transition: ease 0.3s;
-moz-transition: ease 0.3s;
-o-transition: ease 0.3s;
-ms-transition: ease 0.3s;
transition: ease 0.3s;
}

#nav {
    text-decoration: none;
    font-family: 'FontSiteSansCondensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
}

如果你编译它，你会看到我有3篇文章来自彼此，目前每个1100px高，每个都有链接。我想知道的是，如果我按下一个链接，它将带我到相应的文章（我可以做），但当我在该文章中滚动时，我将看到文章顶部的顶部到底部滚动的文章的底部，但没有更多。

一个例子。如果我选择1500px高的文章1，而我的屏幕是1200px高，那么我将看不到~300px。还有另外两篇文章。我想从第一条的顶部滚动到底部，以查看另一条300px的文章而不重叠到第2条。

（我知道我的代码还有其他问题，但是它有效并且问题主要是文本链接不匹配，忽略它们，因为我将继续开发时修复它们）。

Answer 1

点击#page2后，您可以添加javascript来隐藏page3和article1 DIV，等等..

<li><a class="nav" href="#Article1" onclick="selectArticle1()">Article 1</a></li>

function selectArticle1(){
  document.getElementById('page1').style.display = "block";
  document.getElementById('page2').style.display = "none";
  document.getElementById('page3').style.display = "none";
}

HTML / CSS一个页面网站只滚动某些div

1 个答案: