时间戳

首页 > 解决方案 > 固定中间导航栏

html - 固定中间导航栏

问题描述

我正在尝试建立一个个人网站示例，

body{
    background-color: rgba(0, 0, 0, 0.123);
    margin: 0;
}
.wraper{
    display: grid;
    grid-template-rows: repeat(4,1fr);    
}
.box1{
order: 1;
height: 100vh;
display: grid;
grid-template-rows: 10% 60% 15% 15%;
border: 1px black solid;
grid-gap: 10px;
background-image: url("b.jpg");
background-repeat: no-repeat;
background-position:center ;
background-size: 210vh 200vh;
}
.box1>div{
  
}
.logo{

   
}
.logo>img{
    height: 30px;
    width: 30px;
}
.chancing-word{   
    font-size: 50px;
    text-align: center;
    padding: 13%;
    color: white;
}
.down_writing{
    font-size: 30px;
    text-align: center;
    padding: 5%;
    color: white;
}
.arrow_down{
    width: 30px;
    height: 30px;
    border: solid white;
     border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg); 
}
.arrow1{
   text-align: center;
   padding-bottom: 20px;   
}
.box2{
order: 2;
display: block;
position: sticky;
z-index: 1;




}
.box::before{
    
}
.box3{
order: 3;
}
.box4{
order:4;
}
header{
    background-color: rgba(70, 127, 165, 0.123);
    
    border-radius: 10px;
    
}
.navbar { 
    
    height: 75px;
    margin: 0;
    display: flex;
    justify-content: flex-end;   
    padding: 10px;
    align-items: flex-end;  
}
    
    
.navbar a{
    text-decoration: none;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 25px;
    text-align: center;
    margin: 1em;
    
}
.navbar a:hover{
    background-color: cornflowerblue;
    border: cornflowerblue thin 0,1px;
    border-radius: 10px;
}






.chancing-word::after{
    content: "Follow your dreams";
    animation: textanim 10s linear infinite; 
}
@keyframes textanim {
    25%{
        content: "It is never too late";
    }
    50%{
        content: "You can do it, too"
    }
    75%{
        content: "You, I`m talking to YOU"
    }
}
<!DOCTYPE html>
<html>
<head>
    <link href="personal webpage.css" type="text/css" rel="stylesheet">
    <title>Latecoder</title>   
</head>
<body>
    <div class="wraper">
        <div class="box1">
            <div class="logo"><img  src="logo.jpg" alt="logo"></div>
            <div class="chancing-word"> </div>
            <div class=down_writing>Hello, over here</div>
            <div class="arrow1"><i class="arrow_down"></i></div>
            
        </div>
        <div class="box2">

                <nav class="navbar">
                    <div class="nav_buttons"><a href="#" id="home">Home</a></div>
                    <div class="nav_buttons"><a href="#" id="services">Services</a></div>
                    <div class="nav_buttons"><a href="#" id="Works">Works</a></div>
                    <div class="nav_buttons"><a href="#" id="contact">Contact</a></div>
                        
                    
                </nav>
            
        </div>
        <div class="box3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis voluptas minus dolor unde dicta aliquid odio ut temporibus, aspernatur distinctio nam voluptatibus placeat illum impedit, quisquam recusandae rem sapiente libero.</div>
        <div class="box4"></div>
    </div>
    
       
    <footer>

    </footer>
    
</body>

</html>

我尝试将导航栏贴在网站中间，向下滚动后，我希望导航栏保持在顶部。另外，如果可能的话，我想删除左侧的滚动条。

我给出了足够的细节 我给出了足够的细节 我给出了足够的细节

标签： htmlcssflexboxnavbar

解决方案

看看我的例子。我使导航栏可移动。您的导航栏只会在 div“box2”内移动，因为这是因为您网站的当前结构。为了使导航栏在整个站点中移动，您需要将导航栏移到 div“box2”之外。

body{
    background-color: rgba(0, 0, 0, 0.123);
    margin: 0;
}
.wraper{
    display: grid;
    grid-template-rows: repeat(4,1fr);    
}
.box1{
order: 1;
height: 100vh;
display: grid;
grid-template-rows: 10% 60% 15% 15%;
border: 1px black solid;
grid-gap: 10px;
background-image: url("b.jpg");
background-repeat: no-repeat;
background-position:center ;
background-size: 210vh 200vh;
}
.box1>div{
  
}
.logo{

   
}
.logo>img{
    height: 30px;
    width: 30px;
}
.chancing-word{   
    font-size: 50px;
    text-align: center;
    padding: 13%;
    color: white;
}
.down_writing{
    font-size: 30px;
    text-align: center;
    padding: 5%;
    color: white;
}
.arrow_down{
    width: 30px;
    height: 30px;
    border: solid white;
     border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg); 
}
.arrow1{
   text-align: center;
   padding-bottom: 20px;   
}
.box2{
order: 2;
display: block;
position: sticky;
z-index: 1;




}
.box::before{
    
}
.box3{
order: 3;
}
.box4{
order:4;
}
header{
    background-color: rgba(70, 127, 165, 0.123);
    
    border-radius: 10px;
    
}
.navbar { 
    position: sticky;
    top: 0;
    height: 75px;
    margin: 0;
    display: flex;
    justify-content: flex-end;   
    padding: 10px;
    align-items: flex-end;  
}
    
    
.navbar a{
    text-decoration: none;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 25px;
    text-align: center;
    margin: 1em;
    
}
.navbar a:hover{
    background-color: cornflowerblue;
    border: cornflowerblue thin 0,1px;
    border-radius: 10px;
}

.chancing-word::after{
    content: "Follow your dreams";
    animation: textanim 10s linear infinite; 
}
@keyframes textanim {
    25%{
        content: "It is never too late";
    }
    50%{
        content: "You can do it, too"
    }
    75%{
        content: "You, I`m talking to YOU"
    }
}
<!DOCTYPE html>
<html>
<head>
    <link href="personal webpage.css" type="text/css" rel="stylesheet">
    <title>Latecoder</title>   
</head>
<body>
    <div class="wraper">
        <div class="box1">
            <div class="logo"><img  src="logo.jpg" alt="logo"></div>
            <div class="chancing-word"> </div>
            <div class=down_writing>Hello, over here</div>
            <div class="arrow1"><i class="arrow_down"></i></div>
            
        </div>
        <div class="box2">

                <nav class="navbar">
                    <div class="nav_buttons"><a href="#" id="home">Home</a></div>
                    <div class="nav_buttons"><a href="#" id="services">Services</a></div>
                    <div class="nav_buttons"><a href="#" id="Works">Works</a></div>
                    <div class="nav_buttons"><a href="#" id="contact">Contact</a></div>
                        
                    
                </nav>
            
        </div>
        <div class="box3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis voluptas minus dolor unde dicta aliquid odio ut temporibus, aspernatur distinctio nam voluptatibus placeat illum impedit, quisquam recusandae rem sapiente libero.</div>
        <div class="box4"></div>
    </div>
    
       
    <footer>

    </footer>
    
</body>

</html>

推荐阅读