Javascript 向下推送页面内容的HTML导航栏_Javascript_Html_Css

Javascript 向下推送页面内容的HTML导航栏

javascript html css

Javascript 向下推送页面内容的HTML导航栏,javascript,html,css,Javascript,Html,Css,在我制作的网页上，整个页面内容都会被导航栏向下推。我使用了fullpage.js，但导航栏会向下推整个页面内容，包括文本和图像。如何解决此问题？图像的问题可以在第三张幻灯片上显示多谢各位正文{ 字体系列：“Lato”，无衬线； } .覆盖{ 身高：0%；宽度：100%；位置：固定； z指数：9999；排名：0；左：0；背景色：rgb（0,0,0）；背景色：rgba（0,0,0,0.9）；溢出y：隐藏；过渡：0.5s； } .覆盖内容{ 位置：相对位置；最高：25%；宽度

在我制作的网页上，整个页面内容都会被导航栏向下推。我使用了fullpage.js，但导航栏会向下推整个页面内容，包括文本和图像。如何解决此问题？图像的问题可以在第三张幻灯片上显示

多谢各位

正文{
字体系列：“Lato”，无衬线；
}
.覆盖{
身高：0%；
宽度：100%；
位置：固定；
z指数：9999；
排名：0；
左：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
溢出y：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.a:悬停，
.a：聚焦{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.覆盖{
溢出y：自动；
}
.覆盖{
字号：20px
}
.overlay.closebtn{
字体大小：40px；
顶部：15px；
右：35px；
}
}
h1{
文本对齐：居中；
字体系列：“蒙特塞拉特”，无衬线；
颜色：#37675D！重要；
}
p{
文本对齐：居中；
字体系列：“蒙特塞拉特”，无衬线；
颜色：#37675D！重要；
}
身体{
背景色：#abf0d1；
}
span.stickynav{
宽度：100%；
高度：50px；
字体大小：50px；
顶部：0像素；
左：10px；
位置：绝对位置；
z指数：999；
}
.容器液体，
.集装箱lg，
.货柜经理，
.集装箱sm，
.集装箱xl{
宽度：75%；
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
}
#第一节{
背景图片：url（images/pak1.jpg）；
背景：无重复中心滚动；
}
#第2节{
背景图片：url（images/pak2.jpg；）；
背景：无重复中心滚动；
填充：6%0；
}
#第三节{
背景图片：url（images/pak3.jpg）；
背景：无重复中心滚动；
填充：6%0；
}
#第四节{
背景图片：url（imgs/bg4.jpg）；
背景：无重复中心滚动；
填充：6%0；
}
.paklogo{
右边填充：10px；
z指数：999！重要；
}
#杰玛{
左侧填充：100px；
}
.fp表细胞{
显示：表格单元格；
垂直对齐：中间对齐；
宽度：100%；
高度：0px！重要；
}
#贾马{
左侧填充：100px；
}
div.fontsize{
字体大小：200%；
}
输入[类型=文本]，
选择，
文本区{
宽度：100%；
填充：12px；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
边缘顶部：6px；
边缘底部：16px；
调整大小：垂直
}
输入[类型=提交]{
背景色：#4CAF50；
颜色：白色；
填充：12px 20px；
边界：无；
边界半径：4px；
光标：指针；
}
输入[类型=提交]：悬停{
背景色：#45a049；
}
.containerform{
边界半径：5px；
背景色：#F2F2；
填充：20px；
宽度：75%；
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
}
.集装箱{
高度：200px；
宽度：50%；
}


标题
☰
函数openNav（）{
document.getElementById（“myNav”）.style.height=“100%”；
}
函数closeNav（）{
document.getElementById（“myNav”）.style.height=“0%”；
}
标题
标题

Lorem ipsum dolor sit amet，是一位杰出的献身者。自由女神佩伦茨克是一位高贵的布兰迪特。这是一种痛苦的折磨，是一种痛苦的折磨。Phasellus pharetra lacus id molectie dictum。在odio sem中，porttitor
康瓦利斯·亨德雷特（vitae convallis hendrerit），乌兰姆·科佩尔·奎斯·埃尼姆（ullamcorper quis enim）。多奈克·阿利奎特·洛博蒂斯·埃格斯塔斯。维瓦莫斯·普莱西斯。设备直径。Nunc苏打水和我的调味品。布朗迪特·马蒂斯·维利特。波苏尔奥奇的埃尼安
乱数假文
“Lorem ipsum door sit amet，供职于高级管理人员，负责临时性的劳动和财产分配。但是，在最低限度的情况下，我们必须进行一次实习，以确保公司的劳动和财产分配符合一般消费者的要求
我要以我的名字来代替我，因为我的名字是“我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字，我的名字。”
标题
联系方式：---
新建整页（“#整页”{
自动滚动：对，
导航：正确
})

我在构建网站时也遇到了类似的问题。我使用了一组变量和

位置：绝对值。这就是我的意思
首先，创建具有所需导航栏大小的变量。您可以使用css文件中的root
伪类来实现这一点。你的文件中有很多css和html，所以我将使用不同的类和ID。要使用根伪类并创建变量，请执行
:root {
  --navbar-height: 8vh;
  --navbar-margins: 1vh;
}

当然，您可以更改值和变量名。在CSS中声明变量需要开头的-->
。：root
伪类允许通用地访问变量
如果您不知道，vh
表示视口高度，vw
表示视口宽度100vh
始终等于屏幕的高度，100vw
始终等于屏幕的宽度，因此vh
和vw
是响应性网页设计的重要单元
然后在导航栏里，我会做一些像
#navbar {
  position: absolute;
  height: var(--navbar-height);
  top: var(--navbar-margins);
  left: var(--navbar-margins);
  width: calc(100vw - (2 * var(--navbar-margins));
} 

尽你所能
<body>
  <navbar id="navbar">
    <!-- All navbar stuff goes here -->
  </navbar>
  <div id="content">
    <!-- The rest of your content goes here -->
  </div>
</body>

#content {
  position: absolute;
  /* if you want a bottom margin and have a top margin on your navbar... */
  top: calc(100vh - var(--navbar-height) - (2 * var(--navbar-margins));
  /* if you want a bottom margin OR have a top margin on your navbar ... */
  top: calc(100vh - var(--navbar-height) - var(--navbar-margins);
  /* or if you want no bottom or top margin on your navbar */
  top: calc(100vh - var(--navbar-height);
}