我的网站在这里：blackdeath1098.github.io
正如您在顶部看到的那样，导航栏不在顶部，图片不在其下方。
我能做些什么来实现这个目标？
像这样：https://www.devonstank.com
在图片上方看到顶部的导航栏是如何透明的？
基本上就是这样。
答案 0 :(得分：0)
在查看您网站的代码后，您目前在图片下方放置了导航栏，只需移动
<nav class="navbar navbar-default navbar-static-top transparent" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#cocaine">Cocaine Cowboys</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact Me</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
在图像上方而不是下方。
答案 1 :(得分：0)
使用nav-wrapper包装nav标签，并在下面的CSS中应用提及样式。
我希望它有所帮助
HTML：
<div class="nav-wrapper">
<nav role="navigation" class="navbar navbar-default navbar-static-top transparent">
<----navigation stuff---->
</nav>
</div>
CSS：
.nav-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 20;
}
享受：）
答案 2 :(得分：0)
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 175) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".navbar-fixed-top").removeClass("transparent");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$(".navbar-fixed-top").addClass("transparent");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="https://blackdeath1098.github.io/CSS.css" rel="stylesheet" />
<style>
.navbar-default {
position: absolute;
top: 0;
width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="scale-image">
<img src="https://blackdeath1098.github.io/synthwave3.jpg" class="scale-image">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top transparent" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#cocaine">Cocaine Cowboys</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact Me</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="image-wrapper">
<br>
</div>
</div>
<section id="heading" class="heading">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="image">Simon's official webpage</h1>
</div>
</div>
</div>
</section>
<section id="top" class="top-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</section>
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Hello and welcome to my website</h1>
<p class="first">A little about this site</p>
<br>
<p class="body">I have put up many personal websites in my lifetime, mostly because I could not be satisfied by the way they looked or turned out. However, I have decided to put my mind and body to this challenge and created from scratch, yet another, more official
personal website. All work done from now on will be on this site only. Unless I need some serious overhaul or facelift, this is the website that I will constantly update. The code is viewable on github here:</p>
<br>
<a href="https://github.com/blackdeath1098/blackdeath1098.github.io" target="blank" class="btn btn-default" role="button">
<i class="fa fa-github fa-lg"></i> Source Code
</a>
<br>
<br>
<br>
<br>
<br>
<hr>
<p class="first">A little about me</p>
<p class="body">My name is Simon Zhang. I am currently a freshman at Bergen County Technical Schools in Teterboro (at time of writing it is 2016). It has been a long way since I have first started programming. I first began with Python, but at the time I was
quite young and didn't make much sense of it. I returned to it after learning HTML, CSS, Bootstrap, and other front end development. I then focused on Python and learned how to use it for scripting purposes. I am now working on learning backend
with Flask (I absolutely abhor PHP). Other plans will come later, as the creator of Github, Chris Wanstrath, has said not to have too defined plans for the future. However, I do have at least some loosely defined plans of what to do next, and
those include Javascript (JQuery and Angular), Flask, some updates to the websites (RSS feed?), and Cocaine Cowboys. Past that I will probably want to learn C++. I have a few projects I am working on, and many more will come. My projects can
be seen in my "Projects" tab.
<br>
<br>
</p>
<p class="body">Currently however, I am looking for a job. My language skills include:</p>
<ul class="body">
<li class="body">English (Native)</li>
<li class="body">Chinese (Conversational)</li>
<li class="body">French (Basic)</li>
</ul>
<br>
<p class="body">My programming language skills include:</p>
<ul class="body">
<li class="body">HTML</li>
<ul class="dashed">
<li>Bootstrap</li>
<li>Material Design Lite</li>
<li>Skeleton</li>
</ul>
<li class="body">CSS</li>
<li class="body">JavaScript</li>
<ul class="dashed">
<li>JQuery (Almost finished learning)</li>
<li>AngularJS (Learning)</li>
<li>RevealJS</li>
</ul>
<li class="body">Python</li>
<ul class="dashed">
<li>Flask</li>
</ul>
<li class="body">Miscellaneous</li>
<ul class="dashed">
<li>Material Design by Google</li>
</ul>
</ul>
<br>
<p class="body">If you wish to hire me, or even just want me to work with you in a project, Feel free to contact me in the Contact Me section.</p>
</div>
</div>
</div>
</section>
<section id="projects" class="projects-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Projects</h1>
<div class="container">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="icon-prog-js02 div-overlay">
<a href="#Javascript-projects">
<div class="overlay">
<span class="plus">
Javascript Projects
</span>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="icon-html5-01 div-overlay">
<div class="overlay">
<span class="plus">
HTML/CSS projects
</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="icon-github-01 div-overlay">
<a href="#other-projects">
<div class="overlay">
<span class="plus">
Other Projects
</span>
</div>
</a>
</div>
</div>
</div>
<h3>Javascript</h3>
<ul class="body">
<li>A mad lib about summer camp</li>
<li>The lyrics to Ode to Viceroy, by Mac Demarco (I only did this because it was a school assignment)</li>
<li>A calculator for Heron's formula (The form boxes are off, yes I am well aware. I have no intention of ever fixing them, I'm too lazy)</li>
</ul>
<h3>HTML/CSS</h3>
<ul class="body">
<li>My First Ever Published Website (warning, may cause PTSD, turn down volume)</li>
<li>My Second Website, copy and pasted from a Bootstrap Theme</li>
<li>My Second Website (Using MDL)</li>
<li>This Website</li>
</ul>
<h3>Upcoming Projects</h3>
<p class="body">I have many more projects coming. You should check regularly to see if I have added more projects here. I am also open to job offerings or collaborations</p>
<ul class="body">
<li>Cocaine Cowboys, a Hotline Miami mod (I will create a seperate website for this)</li>
<li>An HTTPS server so that I may host my own web server with backend</li>
<li>Something with Clay Allen, probably another website</li>
</ul>
</div>
</div>
</div>
</section>
<section id="cocaine" class="cocaine-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Cocaine Cowboys</h1>
<p class="first">Every bullet comes a choice</p>
<p class="body">Cocaine Cowboys is a mod of the famous top down blood-splattering, drug fueled rampage of Hotline Miami. The game will be set before the events of the first game, and will revolve around the character Daniels from Beard's unit. The story focuses
on Daniel's upbringings and life as a drug dealer, school teacher and finally, a soldier. Cocaine Cowboys will have a strong focus on drugs. New gameplay mechanics include taking drugs before missions, and receiving benefits and drawbacks based
on what you took. For example, by snorting cocaine, you will move and fire your revolver much faster, but have slower reload speeds due to your nervousness and fidgeting. Acids and other hallocinogens will slow down time, but will make you see
enemies that aren't there. A (tentative) release date is hopefully by the end of summer, 2017.</p>
<br>
<p class="body">I will create a new, separate website for this game as more artwork and music is produced.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Me!</h1>
<p class="body">Perhaps the section we've all been looking for, the contact me section. Well, because I can't use any backend on Github, these forms will not work. Instead, just send me an email at simzha19@bergen.org</p>
</div>
</div>
</div>
</section>像这样？我添加了
<style>
.navbar-default {
position: absolute;
top: 0;
width: 100%;
}
</style>