我已經制作了一個對角滾動頁面，但是當我應用插件使其以這種方式滾動時，導航欄不再固定，加上我的部分不居中，我的意思是它們是垂直顯示的，而不是對角線，我不知道如何以這種方式顯示它們，有什么解決方案嗎？我的首要任務是導航欄，但如果我能在一個問題中解決這兩件事，那就更好了。感謝社區！<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght@900&display=swap" rel="stylesheet"><meta charset="utf-8"><title>Subworld Productions</title><!-- <link rel="stylesheet" href="css/styles.css">--><body data-0="transform:translateX(0%)" data-4000="transform:translateX(-300%)"> <header> <nav> <img src="Graphic logo.png" alt="Subworld Productions"> <ul class="nav-links"> <li><a href="#home">Home</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#submit">Submit</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav> <section id="home"> <h1>HOME PAGE</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
1 回答
繁花如伊
TA貢獻2012條經驗 獲得超12個贊
您的 CSS 存在一些問題。第一個是您對導航鏈接屬性有多個聲明。我對它們進行了分組并調整了它們（稍后會詳細介紹）我還整理了你的CSS以按順序放置你的CSS：首先是導航鏈接，然后是導航鏈接li，然后是導航鏈接li a等，因為CSS是按這個順序讀取的。你在一個 css 類中有 display:flex; 和 position:absolute - 這些沖突，我刪除了絕對定位。
然而，真正拋棄你的ul，使鏈接不可見的是translateX——將你的鏈接翻譯100%，就是將你的鏈接移出視線。我把這個注釋掉了。按原樣（現在）您的鏈接顯示，懸停時動畫，單擊時滾動到適當的部分。另請注意：您的部分中的網址后面有兩個分號。我在您發布的代碼和片段代碼中更正了這一點。
希望這可以幫助
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
body {
background-color: #900c3f;
font-family: Montserrat;
height: 100vh;
color: #F5F5F5;
overflow: hidden;
overflow-y: scroll;
scroll-behavior: smooth;
}
img {
width: 130px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}
nav {
width: 100%;
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #ff5733;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
/* position: absolute;
right: 0px;*/
height: 10vh;
top: 17vh;
background-color: #ff5733;
flex-direction: row;
font-size: 80%;
align-items: center;
/*transform: translateX(100%);*/
transition: transform 0.5s ease-in;
}
.nav-links li {
list-style: none;
color: #ffffff;
}
.nav-links li a {
display: inline-block;
color: #ffffff;
}
.nav-links li a:after {
content: '';
width: 0;
height: 5px;
display: block;
background: #F5F5F5;
transition: 300ms;
border-radius: 5px;
}
.nav-links li a:hover:after {
width: 100%;
}
.nav-links li {
opacity: 1;
}
.burger {
display: block;
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.nav-active {
transform: translateX(0%);
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100vh;
scroll-snap-align: center;
}
section h1 {
font-size: 4rem;
justify-content: center;
align-items: center;
}
section p {
font-size: 1.5rem;
justify-content: center;
align-items: center;
}
/* Section Images */
section#home {
background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;
}
section#portfolio {
background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;
}
section#submit {
background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;
}
section#contact {
background: url('https://source.unsplash.com/2aAHlfDOhJM/1600x900') no-repeat center center/cover;
}
section#about {
background: url('https://source.unsplash.com/user/erondu/1600x900') no-repeat center center/cover;
}
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght@900&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Subworld Productions</title>
<!-- <link rel="stylesheet" href="css/styles.css">-->
<body data-0="transform:translateX(0%)" data-4000="transform:translateX(-300%)">
<header>
<nav>
<img src="Graphic logo.png" alt="Subworld Productions">
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#submit">Submit</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section id="home">
<h1>HOME PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="portfolio">
<h1>PORTFOLIO PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="submit">
<h1>SUBMIT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="contact">
<h1>CONTACT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="about">
<h1>ABOUT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</header>
<!-- <script src="javascript/app.js"></script>
<script src="skrollr.js"></script>-->
<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js">
skrollr.init();
</script>
</body>
- 1 回答
- 0 關注
- 165 瀏覽
添加回答
舉報
0/150
提交
取消