个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 23:58:36 25 4
gpt4 key购买 nike

所以我正在尝试创建一个模拟多个超链接的网站，同时在外部保留固定内容。

到目前为止，我的主网页上有这个

<!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 篇文章来自彼此，目前每篇文章高 1100 像素，并带有指向每篇文章的链接。我想知道的是，如果我按下一个链接，它会带我到相应的文章(我可以做到)，但是当我在该文章中滚动时，我会看到文章顶部的顶部到文章底部滚动时文章底部，但仅此而已。

一个例子。如果我选择 1500 像素高的文章 1，而我的屏幕是 1200 像素高，那么我将看不到约 300 像素。还有其他 2 篇文章。我想从文章 1 的顶部滚动到底部以查看文章的其他 300 像素，而不与文章 2 重叠。

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

最佳答案

可以添加javascript在点击article1时隐藏#page2和page3 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，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22520960/

25 4 0
文章推荐： php - 按下提交按钮后加载 php
文章推荐： javascript - 消除根范围摘要调用的抖动
文章推荐： javascript - JS "Greater than"运算符；
文章推荐： java - 如何在 GWT UiBinder 中使用 JavaScript 回调函数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com