Question

我正在尝试设计具有多个页面的网页。例如，当您滚动到“关于”页面时，其背景颜色与联系页面不同。但是，到目前为止，我只获得每种页面颜色的标题。在您向下滚动我的网页时，它会到达另一个页面。我尝试过

#name{background-color:#ffffff;}
#Portfolio{background-color:#d5f4e6;}
#about{background-color:#fefbd8;}
#ContactMe{background-color:#ffffff;}

在css样式页面中根据其ID

。关于如何在不同页面上获得不同背景颜色的任何线索

html代码：

  <body id="Portfolio"></body>

  <body id="about"></body>

  <body id="Contact Me"></body>

Answer 1

当您说“多页”时，它的意思是“在单独的文件中分开页面！”例如“ aboutpage.html”或“ contact.html”。在这种情况下，您可以使用“ body”标签：

<body id="about">

但是您说了“当您滚动到“关于”页面时”，意思是“您可以像这样使用具有不同部分的页面：

<p id="about"></p>
<p id="contact"></p>

或

<div id="about"></div >
<div id="contact"></div>

Answer 2

您应指定包含目标的元素的高度为100vh。使用您的（原始发布的）代码，您可以像这样：

body > div {min-height:100vh;}

此CSS将捕获您在提供的代码中使用的container- * div。我建议并继续学习基础知识。从这里https://developer.mozilla.org/he/docs/Web/HTML

开始

享受代码！

Answer 3

如果是同一页面滚动条，则应添加

Global.asax

致您的CSS。

如果您可以提供确切的代码，则可以更轻松地为您提供帮助。

Answer 4

简单代码

$(document).ready(function(){
startFromtop=$(".start").position().top
aboutFromtop=$(".about").position().top
contactFromtop=$(".contact").position().top
endFromtop=$(".end").position().top-100
$(window).scroll(function(){
windowformtop=$(this).scrollTop();
if(windowformtop>=startFromtop && windowformtop<aboutFromtop){
$(document.body).css("background-color","white")
}
else if(windowformtop>=aboutFromtop && windowformtop<contactFromtop){
$(document.body).css("background-color","red")
            }else if(windowformtop>=contactFromtop && windowformtop<endFromtop){
             $(document.body).css("background-color","green")
}else if(windowformtop>=endFromtop){
$(document.body).css("background-color","blue")
}

})
})

<!DOCTYPE html>

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <title></title>
 <style type="text/css">
 div{height:700px;border:2px solid red;}
 </style>
</head>

<body>
<div class="start">Start</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="end">END PAGE</div>
</body>
</html>

Answer 5

用<body>标签替换<div>并添加适当的CSS。这些页面应具有相同的类，但必须具有唯一的ID。您可以使用CSS属性background-color更改背景颜色。

HTML：

<html>
<head></head>
<body>
<div class=“page”id=“portfolio”>
</div>
<div class=“page”  id=“about”>
</div>
<div class=“page” id=“contactme”>
</div>
</body>
</html>

CSS：

.page{
position:relative;
width:100%;
height: auto;
margin:auto;
}
#portfolio{
background-color:white;
}
#about{
background-color:red;
}
#contactme{
background-color:blue;
}

希望这对您有用。

不同的页面不同的颜色

5 个答案: