Html 有没有一种方法可以让我的导航栏保持在右边,并在滚动时始终显示在页面顶部?
初始荷载: 滚动后: 我试图在视口的顶部有一个固定的导航。因此,当您向下滚动页面时,导航始终可见。我的问题是,我的导航栏品牌设置在导航栏的左侧,我与页面其余部分的链接设置在右侧。当我将位置固定添加到navbar品牌时,效果很好(当我向下滚动页面时,该品牌保持可见),但是无论我尝试将位置固定添加到任何其他类、id或包含右侧链接的元素时,最后,它们被固定在左边,覆盖在品牌上,或者直接坐在品牌下面。我不明白为什么会这样 我尝试在导航栏中添加位置固定到各个类,但没有成功。我还尝试用float:right将项目强制到右侧!重要的。我发现的大多数文章都建议添加position:fixed到.nav类,但当我这样做时,项目会被推到左侧。我在导航中包括了导航的html以及导航的CSS、背景视频和我链接到的模式,以防出现问题。谢谢你的帮助!非常感谢 HTMLHtml 有没有一种方法可以让我的导航栏保持在右边,并在滚动时始终显示在页面顶部?,html,css,bootstrap-4,navbar,Html,Css,Bootstrap 4,Navbar,初始荷载: 滚动后: 我试图在视口的顶部有一个固定的导航。因此,当您向下滚动页面时,导航始终可见。我的问题是,我的导航栏品牌设置在导航栏的左侧,我与页面其余部分的链接设置在右侧。当我将位置固定添加到navbar品牌时,效果很好(当我向下滚动页面时,该品牌保持可见),但是无论我尝试将位置固定添加到任何其他类、id或包含右侧链接的元素时,最后,它们被固定在左边,覆盖在品牌上,或者直接坐在品牌下面。我不明白为什么会这样 我尝试在导航栏中添加位置固定到各个类,但没有成功。我还尝试用float:rig
如果可能的话,我希望品牌(“allicndev”)位于左上方,链接(“关于”、“公文包”、“简历”、“技能”和“联系人”)位于右上方,当页面滚动或单击指向各部分的链接时,整个导航将以这种方式保持可见。是,滚动时,您应该使用fixed top类作为fixed top导航栏
<div class="navbar fixed-top">
</div>
您的示例中的标记是针对引导3的,因此这是问题1,因为您已经标记了引导4 假设Bootstrap 4是正确的,添加正确的标记和类似乎可以创建您所描述的内容:
-
ml auto
(marginleft:auto
,如果您检查源代码)类允许链接一直向右滑动<代码>固定顶部和粘性顶部
都会将导航栏粘贴到视口顶部
sticky top
可能是一个更好的类,因为它不需要将主体内容向下撞击(您在小提琴的CSS部分看到的padding top
),但这取决于您是否知道(或关心)大多数预期访问者是否会使用
另一方面,请注意>h3(锚元素中的h3元素)不是(默认情况下)有效的HTML<代码>谢谢你的建议。我试了一下,但还是不太管用。这会导致指向右侧的链接保持在右侧,但在滚动页面时,它们不会保持可见。是不是有些冲突导致了我的失踪?对不起,我不能理解你的问题。。。您需要将导航栏固定在顶部,通过添加“fixed top”类即可。下一件事是你把导航条固定在右边??这是怎么回事??你能提供关于这个的截图吗
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
position: relative;
}
body {
margin: 0;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 17px;
}
#myVideo {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.container-fluid {
padding-right: 30px;
/* position: fixed; */
}
nav {
height: 75px;
display: border-box;
color: white;
font-size: 12px;
text-align: center;
position: fixed;
/*z-index: 10px;*/
}
nav.navbar {
width: 100%;
}
.navbar-header {
position: fixed;
}
.nav.navbar-nav.navbar-right > li {
padding-top: 15px;
margin: 10px;
}
.nav > li > a {
display: inline;
padding-left: 0;
padding-right: 0;
padding-top: 5px;
background-color: transparent;
}
.navbar-nav>.active>a, .navbar-nav>.active>a:focus, .navbar-nav>.active>a:hover {
background-color: transparent;
}
a.db-line {
transition: white .3s linear;
}
a {
color: white;
text-decoration: none;
}
a > h3 {
color: white;
text-decoration: none;
}
a:hover {
color: #f97f04;
}
/* a:visited {
color: #EDCF10;
} */
.modal {
display: none;
height: 100%;
left: 10px;
position: fixed;
top: 0;
width: 100%;
}
.modal.open {
display: block;
}
.modal-header,
.modal-footer {
height: 75px;
}
.modal-content,
.modal-footer {
width: 100%;
}
.modal-footer {
bottom: 0px;
}
#modal-embed {
width: 100%;
height: 75vh;
}
<div class="navbar fixed-top">
</div>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<nav class="navbar navbar-expand fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#home">allicndev</a>
<div class="collapse navbar-collapse in" id="navbarCollapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item active"><a href="#about" class="nav-link db-line">About</a></li>
<li class="nav-item "><a href="#portfolio" class="nav-link">Portfolio</a></li>
<li class="nav-item ">
<!-- <a href="#" data-toggle="modal" data-placement="top" title="Resume" data-target="#modalResume"><span>Resume</span></a> -->
<a href="#" class="nav-link" data-toggle="modal" data-target="#myModal">Resume</a>
</li>
<li class="nav-item "><a class="nav-link" href="#skills">Skills</a></li>
<li class="nav-item "><a class="nav-link" href="#contact">Contact</a></li>
</ul><!-- /nav navbar-nav navbar-right -->
</div>
</div><!-- /container-fluid -->
</nav>