В настоящее время я создаю свою веб-страницу на Github ( Githug Page ), и у меня возникли некоторые проблемы с верхним меню. Как видно, при прокрутке вниз меню исчезает, а при прокрутке снова появляется. Тем не менее, я хотел бы сделать поведение намного проще, то есть сделать его фиксированным относительно заголовка. Другими словами, я просто хочу, чтобы меню появилось в верхней части страницы, как еще один элемент. Я не хочу, чтобы меню следовало за прокруткой. Выглядит просто, но я не получаю результат.
Это мой текущий main.js.
(function($) {
var $window = $(window),
$body = $('body');
// Breakpoints.
breakpoints({
xlarge: [ '1141px', '1680px' ],
large: [ '981px', '1140px' ],
medium: [ '737px', '980px' ],
small: [ '481px', '736px' ],
xsmall: [ '321px', '480px' ],
xxsmall: [ null, '320px' ]
});
// Play initial animations on page load.
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-preload');
}, 100);
});
// Scrolly.
$('.scrolly').scrolly();
})(jQuery);
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header_nav").style.top = "0";
} else {
document.getElementById("header_nav").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
В файле index.html, где вы можете видеть, важными разделами являются header и header_nav.
<!DOCTYPE HTML>
<!--
Photon by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Eduardo Alvarado</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="is-preload">
<!-- Header Menu -->
<section id="header_nav">
<nav id="nav">
<div id="navbar">
<ul>
<li><a href="index" class="button small"><p style="color:white">Home</p></a></li>
<li><a href="" class="button small"><p style="color:white">Research</p></a></li>
<li><a href="" class="button small"><p style="color:white">Game-dev</p></a></li>
<li><a href="photography" class="button small"><p style="color:white">Photography</p></a></li>
</ul>
</div>
</nav>
</section>
<!-- Header -->
<section id="header">
<div class="inner">
<span><img src="/images/car_final_256_header.gif"></span>
<h1>Hi, I'm <strong>Eduardo Alvarado</strong>.</h1>
<h1>A passionate software engineer who develops intelligent<br />
cars during the day and loves to design<br />
game-focus art and applications in his spare-time.</h1>
<br />
<p>Want to contact me? Send me a message at <a href="mailto:alvaradopinero.eduardo@gmail.com">alvaradopinero.eduardo@gmail.com</a>.</p>
<ul class="actions special">
<li><a href="#one" class="button scrolly">Discover</a></li>
</ul>
</div>
</section>
<!-- One -->
<section id="one" class="main style1">
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium imp-medium">
<header class="major">
<h2>Background</h2>
</header>
<p align="justify">I am a first year PhD Researcher at <a href='https://www.daimler.com/career/about-us/insights/research-development/'>Daimler AG</a> in Stuttgart, Germany. My research is centered on robust perception for human activity recognition. Prior joininig Daimler, I graduated with a master's degree in <b>Embedded Systems Engineering</b>, with a major in Artificial Intelligence and Autonomous Intelligent Systems from <a href='https://www.uni-freiburg.de/'>Albert-Ludwigs-Universität Freiburg</a>, and with a bachelor's degree in <b>Electronics and Automation Engineering</b> from <a href='https://www.uc3m.es/home'>Universidad Carlos III</a> in Madrid.</p>
</div>
<div class="col-6 col-12-medium">
<span class="image fit"><img src="images/profile_bg_1920_1080.png" alt="" style="padding-top: 12px" /></span>
</div>
</div>
</section>
<!-- Two -->
<section id="two" class="main style2">
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium">
<ul class="major-icons">
<li><span class="icon solid style4 major fa-laptop-code"></span></li>
<li><span class="icon solid style2 major fa-microchip"></span></li>
<li><span class="icon solid style3 major fa-brain"></span></li>
<li><span class="icon solid style5 major fa-gamepad"></span></li>
</ul>
</div>
<div class="col-6 col-12-medium">
<p align="justify">I have dedicated my academic career to the field of robotics, with special interest in AI-based Perception and Behavior Planning applied to intelligent-mobility. I wrote my master's thesis at <a href='https://www.bosch.com/research/'>Robert Bosch GmbH</a> on DL sensor-fusion architectures for Object Detection and Tracking, under the supervision from <a href='https://scholar.google.com/citations?user=2mv2dDkAAAAJ&hl=en'>Prof. Dr. Joschka Boedecker</a> and <a href='https://scholar.google.com/citations?user=LcARjz0AAAAJ&hl=en'>Prof. Dr. Abnihav Valada</a>. I also worked as development-intern at <a href='https://www.zf.com/mobile/en/homepage/homepage.html'>ZF Friedrichshafen</a> on the design of ROS SW-tools for self-driving vehicles. Additionally, I have been working as research assistant for Autonomous Intelligent Systems at the university, on the development of SLAM algorithms and Autonomous Driving simulations.</p>
<p align="justify">I dedicate my day to day to my other great passion too, game-related development and 2D/3D design. Since I was a child, I have always loved bringing to reality dream worlds, characters and landscapes only possible in one's imagination. Little by little, I try to learn more about design, gameplay and visual programming.</p> </div>
</div>
</div>
</div>
</section>
<!-- Three -->
<section id="three" class="main style1 special">
<div class="container">
<header class="major">
<h2>My work</h2>
</header>
<div class="row gtr-150">
<div class="col-4 col-12-medium">
<span class="image fit"><img src="images/pic02.jpg" alt="" /></span>
<h3>Research and Academic Service</h3>
<p>Publications, preprints, SW/HW proyects and news.</p>
<ul class="actions special">
<li><a href="#" class="button">More</a></li>
</ul>
</div>
<div class="col-4 col-12-medium">
<span class="image fit"><img src="images/pic03.jpg" alt="" /></span>
<h3>Game Development</h3>
<p>Game applications, 2D/3D design and visual programming.</p>
<ul class="actions special">
<li><a href="#" class="button">More</a></li>
</ul>
</div>
<div class="col-4 col-12-medium">
<span class="image fit"><img src="images/pic04.jpg" alt="" /></span>
<h3>Photography</h3>
<p>A small portfolio of my favorite trips and places.</p>
<ul class="actions special">
<li><a href="/photography" class="button">More</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Four -->
<!--
<section id="four" class="main style2 special">
<div class="container">
<header class="major">
<h2>Ipsum feugiat consequat?</h2>
</header>
<p>Sed lacus nascetur ac ante amet sapien.</p>
<ul class="actions special">
<li><a href="#" class="button wide primary">Sign Up</a></li>
<li><a href="#" class="button wide">Learn More</a></li>
</ul>
</div>
</section>
-->
<!-- Footer -->
<section id="footer">
<ul class="icons">
<li><a href="docs/CV.pdf" class="icon solid alt fa-id-card"><span class="label">CV</span></a></li>
<li><a href="mailto:alvaradopinero.eduardo@gmail.com" class="icon solid alt fa-envelope"><span class="label">Email</span></a></li>
<li><a href="https://github.com/edualvarado" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li>
<li><a href="#" class="icon brands alt fa-google"><span class="label">Google Scholar</span></a></li>
</ul>
<ul class="copyright">
<li>© Untitled</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</section>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
И, наконец, соответствующая часть css.
/* Header */
#header {
padding: 9em 0 9em 0 ;
background-color: #4686a0;
color: rgba(255, 255, 255, 0.75);
background-attachment: fixed, fixed, fixed;
background-image: url("images/overlay2.png"), url("images/overlay3.svg"), linear-gradient(45deg, #9dc66b 5%, #4fa49a 30%, #4361c2);
background-position: top left, center center, center center;
background-size: auto, cover, cover;
overflow: hidden;
position: relative;
text-align: center;
}
#header a {
border-bottom-color: rgba(255, 255, 255, 0.5);
}
#header a:hover {
color: #ffffff;
}
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header strong, #header b {
color: #ffffff;
}
#header header p {
color: #ffffff;
}
#header header.major:after {
background: #ffffff;
}
#header input[type="submit"],
#header input[type="reset"],
#header input[type="button"],
#header button,
#header .button {
box-shadow: inset 0 0 0 1px #ffffff;
color: #ffffff !important;
}
#header input[type="submit"]:hover,
#header input[type="reset"]:hover,
#header input[type="button"]:hover,
#header button:hover,
#header .button:hover {
background-color: rgba(255, 255, 255, 0.125);
}
#header input[type="submit"]:active,
#header input[type="reset"]:active,
#header input[type="button"]:active,
#header button:active,
#header .button:active {
background-color: rgba(255, 255, 255, 0.25);
}
#header input[type="submit"].primary,
#header input[type="reset"].primary,
#header input[type="button"].primary,
#header button.primary,
#header .button.primary {
background-color: #ffffff;
box-shadow: inset 0 0 0 1px #ffffff !important;
color: #4686a0 !important;
}
#header input[type="submit"].primary:hover,
#header input[type="reset"].primary:hover,
#header input[type="button"].primary:hover,
#header button.primary:hover,
#header .button.primary:hover {
background-color: rgba(255, 255, 255, 0.125) !important;
color: #ffffff !important;
}
#header input[type="submit"].primary:active,
#header input[type="reset"].primary:active,
#header input[type="button"].primary:active,
#header button.primary:active,
#header .button.primary:active {
background-color: rgba(255, 255, 255, 0.25) !important;
}
#header ul.major-icons li .icon {
border-color: #ffffff;
}
#header .icon.major {
color: #ffffff;
}
#header h1 {
margin: 0;
}
#header p {
margin: 1em 0 0 0;
}
#header .actions {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
margin-top: 2.5em;
margin-left: 0;
position: relative;
}
#header .actions li:first-child {
padding-left: 0;
}
#header .actions:after {
background: #ffffff;
content: '';
height: 100vh;
left: 50%;
position: absolute;
top: 100%;
width: 1px;
}
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#header .inner .actions {
-moz-transition: -moz-transform 1.25s ease;
-webkit-transition: -webkit-transform 1.25s ease;
-ms-transition: -ms-transform 1.25s ease;
transition: transform 1.25s ease;
-moz-transition-delay: 1s;
-webkit-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1s;
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
#header:after {
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
background-image: linear-gradient(45deg, #4fa49a, #4361c2);
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
body.is-preload #header .inner {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: 0;
}
body.is-preload #header .inner .actions {
-moz-transform: translateY(30em);
-webkit-transform: translateY(30em);
-ms-transform: translateY(30em);
transform: translateY(30em);
opacity: 0;
}
body.is-preload #header:after {
opacity: 1;
}
/* Header_nav */
#page-wrapper {
padding-top: 3.5em;
}
#header_nav {
background: rgba(0, 0, 0, 0);
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0);
cursor: default;
height: 3.5em;
left: 0;
line-height: 3.5em;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
#header_nav h1 {
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
position: absolute;
top: 0;
}
#header_nav nav {
position: absolute;
right: 1em;
top: 0;
}
#header_nav nav ul {
margin: 0;
}
#header_nav nav ul li {
display: inline-block;
margin-left: 1em;
}
#header_nav nav ul li a, #header_nav nav ul li span {
border: 0;
color: inherit;
display: inline-block;
height: inherit;
line-height: inherit;
outline: 0;
}
#header_nav nav ul li a.button, #header_nav nav ul li span.button {
height: 2em;
line-height: 2em;
padding: 0 1.25em;
}
#header_nav nav ul li a:not(.button):before, #header_nav nav ul li span:not(.button):before {
margin-right: 0.5em;
}
#header_nav nav ul li.active > a, #header_nav nav ul li.active > span {
color: #e44c65;
}
#header_nav nav ul li > ul {
display: none;
}
body.landing #page-wrapper {
padding-top: 0;
}
body.landing #header_nav {
background: transparent;
box-shadow: none;
position: absolute;
}
Подводя итог, я хотел бы, чтобы меню было только в верхней части страницы, поверх заголовка и ничего более. Буду очень признателен за вашу помощь. Я пробовал несколько вещей, но я все еще не очень экспериментировал в веб-дизайне, извините.
Заранее большое спасибо.