Vertical navigation scroll effect modification - javascript

I got this pen: https://codepen.io/janmez/pen/gryoKG but would like it to work more like on this site: https://rallyinteractive.com/. Not the background change, just list on the left. My js knowledge is not sufficient, can you help?
I tried achieving this with css but no success.
Edit: I added the full code and now what I want to achieve. I don't care about background animation, just wanted to make the nav and .content-section work more like on the site I mentioned above. Pen code does some of what I want: nav items get selected while scrolling to the relevant section. What I want to do is to have active nav elements always centered vertically and scroll together with sections. The example site (rallyinteractive.com) does exactly what I need.
$(document).ready(function(){
var contentSection = $('.content-section');
var navigation = $('nav');
//when a nav link is clicked, smooth scroll to the section
navigation.on('click', 'a', function(event){
event.preventDefault(); //prevents previous event
smoothScroll($(this.hash));
});
//update navigation on scroll...
$(window).on('scroll', function(){
updateNavigation();
})
//...and when the page starts
updateNavigation();
/////FUNCTIONS
function updateNavigation(){
contentSection.each(function(){
var sectionName = $(this).attr('id');
var navigationMatch = $('nav a[href="#' + sectionName + '"]');
if( ($(this).offset().top - $(window).height()/2 < $(window).scrollTop()) &&
($(this).offset().top + $(this).height() - $(window).height()/2 > $(window).scrollTop()))
{
navigationMatch.addClass('active-section');
}
else {
navigationMatch.removeClass('active-section');
}
});
}
function smoothScroll(target){
$('body,html').animate({
scrollTop: target.offset().top
}, 800);
}
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lato);
html{
height: 100%;
font-family: 'Open Sans', sans-serif;
background-color: #E9E8E2;
}
body{
height: 100%;
}
nav{
width: 15%;
height: 400px;
position: fixed;
top: auto;
bottom: auto;
z-index: 10;
scroll-snap-type: y mandatory;
overflow-y: hidden;
}
ul{
list-style: none;
padding: 0;
text-align:center;
valign:center;
}
li{
padding: 40px 0;
scroll-snap-align: center;
}
span{
display: inline-block;
position:relative;
}
nav a{
display: inline-block;
color: #272727;
text-decoration: none;
font-size: 1em;
}
.circle{
height: 10px;
width: 10px;
left: -10px;
border-radius: 50%;
background-color: #272727;
}
.rect{
height: 3px;
width: 0px;
left: 0;
bottom: 4px;
background-color: #272727;
-webkit-transition: -webkit-transform 0.6s, width 1s;
-moz-transition: -webkit-transform 0.6s, width 1s;
transition: transform 0.6s, width 1s;
}
nav a:hover, nav .active-section{
color: #9b59b6;
}
nav a:hover span, nav .active-section span{
background-color: #9b59b6;
}
nav .active-section .rect{
width: 40px;
}
.content-section{
position: relative;
width: 80%;
height: 90%;
left: 50%;
background-color: #ecf1f1;
text-align: center;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.content-section h1{
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
color:#9b59b6;
font-size: 3em;
}
/*CREDITS*/
.about{
position: fixed;
bottom:0;
left: 1%;
}
.about a{
text-decoration: none;
font-size: 1.5em;
}
.about a:visited, .about a:active, .about a:link{
color:#000;
}
.about a:hover{
color: red;
}
<nav>
<ul>
<li>
<a href="#section1">
<span class="rect"></span>
<span class="circle"></span>
ONE
</a>
</li>
<li>
<a href="#section2">
<span class="rect"></span>
<span class="circle"></span>
TWO
</a>
</li>
<li>
<a href="#section3">
<span class="rect"></span>
<span class="circle"></span>
THREE
</a>
</li>
<li>
<a href="#section4">
<span class="rect"></span>
<span class="circle"></span>
FOUR
</a>
</li>
<li>
<a href="#section5">
<span class="rect"></span>
<span class="circle"></span>
FIVE
</a>
</li>
</ul>
</nav>
<section id="section1" class="content-section">
<h1>SECTION ONE</h1>
</section>
<section id="section2" class="content-section">
<h1>SECTION TWO</h1>
</section>
<section id="section3" class="content-section">
<h1>SECTION THREE</h1>
</section>
<section id="section4" class="content-section">
<h1>SECTION FOUR</h1>
</section>
<section id="section5" class="content-section">
<h1>SECTION FIVE</h1>
</section>
<div class="about">♡</div>
</div>

Related

Scrolling div/section with indicators

I want to create a vertical scrolling div with an active indicators. However I'm having trouble with it event firing on the div targeted. I set it to window.addEventListener it works fine at full height of the window but if I set it to div.addEventListener it's not firing inside of the element at all. I'm Hoping someone has some pointer for this. Here's what I got so far.
section.scroller {
max-width: 900px;
margin: auto;
background: antiquewhite;
scroll-behavior: smooth;
position: relative;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 17px;
// padding: 0 17px;
box-sizing: content-box;
}
.sec {
min-height: 100vh;
// width: 100vw;
display: flex;
align-items: center;
justify-content: center;
scroll-behavior: smooth;
// width: 100%;
&:nth-child(odd) {
background: #ddd;
}
}
.lnbNavbar {
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0;
border-radius: 15px;
transition: opacity .4s ease .2s;
opacity: 0;
position: relative;
float: right;
transition: .3s all;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
width: 0px;
position: relative;
text-align: right;
.dot {
border: 2px solid#333;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
transition: .2s ease;
span {
display: inline-block;
}
}
}
}
}
.lnbNavbar ul li a:active,
.lnbNavbar ul li a:hover {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.lnbNavbar ul li.active a,
.lnbNavbar ul li:hover a {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.outter {
width: 800px;
height: 500px;
margin: auto;
overflow: hidden;
}
<div class="outter" id="outter">
<section class="scroller" id="scroller">
<nav class="lnbNavbar">
<ul>
<li class="home active">
<a href="#home" class=" home dot">
<span></span>
</a>
</li>
<li class="about">
<a href="#about" class="about dot">
<span></span>
</a>
</li>
<li class="service">
<a href="#service" class="service dot">
<span></span>
</a>
</li>
<li class="project">
<a href="#project" class="project dot">
<span></span>
</a>
</li>
<li class="contact">
<a href="#contact" class="contact dot">
<span></span>
</a>
</li>
</ul>
</nav>
<section class="sec" id="about"><h4>about</h4></section>
<section class="sec" id="service"><h4>service</h4></section>
<section class="sec" id="project"><h4>project</h4></section>
<section class="sec" id="contact"><h4>contact</h4></section>
<section class="sec" id="home"><h4>home</h4></section>
</section>
<script>
const sections = document.querySelectorAll('section');
const navLi = document.querySelectorAll('.lnbNavbar ul li');
const div = document.getElementById("outter")[0];
div.addEventListener('scroll', ()=> {
let current = '';
sections.forEach( section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if(pageYOffset >= (sectionTop - sectionHeight / 4)){
current = section.getAttribute('id');
}
})
console.log(current);
navLi.forEach( li => {
li.classList.remove('active');
if(li.classList.contains(current)){
li.classList.add('active')
}
})
})
</script>
</div>

Close javascript menu when click on item or lost focus

I'm trying to customise a menu I've found on CodePen. Here's what I've found.
What I'm trying to do is modify it so that the menu closes after you click on an item, or if you click outside the menu. I've tried various things but can't seem to get it to work.
Here's my html:
<!-- new hamburger menu be here -->
<div id="menu-main">
<div id="menu-wrapper">
<div id="hamburger-menu"><span></span><span></span><span></span></div>
<!-- hamburger-menu -->
</div>
<!-- menu-wrapper -->
<ul class="menu-list accordion">
<li id="nav1">
<a class="menu-link" href="index.html">Home</a>
</li>
<li id="nav2">
<a class="menu-link" href="#about">About the Project</a>
</li>
<li id="nav3">
<a class="menu-link" href="#timeline">Timeline</a>
</li>
<li id="nav4">
<a class="menu-link" href="#vision">The Vision</a>
</li>
<li id="nav5">
<a class="menu-link" href="#where">Where We Are</a>
</li>
<li id="nav6">
<a class="menu-link" href="#news">Stay In Touch</a>
</li>
<li id="nav7">
<a class="menu-link" href="#faq">FAQ</a>
</ul>
</div>
Here's my JavaScript
$(function() {
function slideMenu() {
var activeState = $("#menu-main .menu-list").hasClass("active");
$("#menu-main .menu-list").animate({left: activeState ? "0%" : "-100%"}, 400);
}
$("#menu-wrapper").click(function(event) {
event.stopPropagation();
$("#hamburger-menu").toggleClass("open");
$("#menu-main .menu-list").toggleClass("active");
slideMenu();
$("body").toggleClass("overflow-hidden");
});
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
$(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
$(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
});
}); // jQuery load
I've tried adding in various classes in this bit as I believe this is what controls the code but no luck:
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
$(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
$(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
});
Would love some help with this.

You can add a check on document click to see if an element has been clicked our the user clicked outside the menu div.
$(function() {
function slideMenu() {
var activeState = $("#menu-container .menu-list").hasClass("active");
$("#menu-container .menu-list").animate({
left: activeState ? "0%" : "-100%"
}, 400);
}
$("#menu-wrapper").click(function(event) {
event.stopPropagation();
$("#hamburger-menu").toggleClass("open");
$("#menu-container .menu-list").toggleClass("active");
slideMenu();
$("body").toggleClass("overflow-hidden");
});
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
$(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
$(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
});
$(document).on("click", function(e) {
let isLink = jQuery(e.target).is(".accordion-content a");
let isOutside = jQuery(e.target).closest("#menu-container").length == 0;
if (isLink || isOutside)
$("#menu-wrapper").trigger("click");
})
}); // jQuery load
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
body {
font-family: 'Dosis', sans-serif;
background: #FF5722;
}
#menu-wrapper {
overflow: hidden;
max-width: 100%;
cursor: pointer;
}
#menu-wrapper #hamburger-menu {
position: relative;
width: 25px;
height: 20px;
margin: 15px;
}
#menu-wrapper #hamburger-menu span {
opacity: 1;
left: 0;
display: block;
width: 100%;
height: 2px;
border-radius: 10px;
color: black;
background-color: white;
position: absolute;
transform: rotate(0deg);
transition: .4s ease-in-out;
}
#menu-wrapper #hamburger-menu span:nth-child(1) {
top: 0;
}
#menu-wrapper #hamburger-menu span:nth-child(2) {
top: 9px;
}
#menu-wrapper #hamburger-menu span:nth-child(3) {
top: 18px;
}
#menu-wrapper #hamburger-menu.open span:nth-child(1) {
transform: translateY(9px) rotate(135deg);
}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {
opacity: 0;
transform: translateX(-60px);
}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {
transform: translateY(-9px) rotate(-135deg);
}
#menu-container .menu-list .menu-submenu {
padding-top: 20px;
padding-bottom: 20px;
}
#menu-container .menu-list {
padding-left: 0;
display: block;
position: absolute;
width: 100%;
max-width: 450px;
background: white;
box-shadow: rgba(100, 100, 100, 0.2) 6px 2px 10px;
z-index: 999;
overflow-y: auto;
overflow-x: hidden;
left: -100%;
}
#menu-container .menu-list li.accordion-toggle,
#menu-container .menu-list .menu-login {
font-size: 16px;
padding: 20px;
text-transform: uppercase;
border-top: 1px solid #dbdcd2;
}
#menu-container .menu-list li:first-of-type {
border-top: 0;
}
.accordion-toggle,
.accordion-content {
cursor: pointer;
font-size: 16px;
position: relative;
letter-spacing: 1px;
}
.accordion-content {
display: none;
}
.accordion-toggle a:before,
.accordion-toggle a:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 30px;
width: 15px;
height: 2px;
margin-top: -1px;
background-color: #5a5858;
transform-origin: 50% 50%;
transition: all 0.3s ease-out;
}
.accordion-toggle a:before {
transform: rotate(-90deg);
opacity: 1;
z-index: 2;
}
.accordion-toggle.active-tab {
background: yellowgreen;
transition: all 0.3s ease;
}
.accordion-toggle a.active:before {
transform: rotate(0deg);
background: #fff !important;
}
.accordion-toggle a.active:after {
transform: rotate(180deg);
background: #fff !important;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu-container">
<div id="menu-wrapper">
<div id="hamburger-menu"><span></span><span></span><span></span></div>
<!-- hamburger-menu -->
</div>
<!-- menu-wrapper -->
<ul class="menu-list accordion">
<li id="nav1" class="toggle accordion-toggle">
<span class="icon-plus"></span>
<a class="menu-link" href="#">Menu1</a>
</li>
<!-- accordion-toggle -->
<ul class="menu-submenu accordion-content">
<li><a class="head" href="#">Submenu1</a></li>
<li><a class="head" href="#">Submenu2</a></li>
<li><a class="head" href="#">Submenu3</a></li>
</ul>
<!-- menu-submenu accordon-content-->
<li id="nav2" class="toggle accordion-toggle">
<span class="icon-plus"></span>
<a class="menu-link" href="#">Menu2</a>
</li>
<!-- accordion-toggle -->
<ul class="menu-submenu accordion-content">
<li><a class="head" href="#">Submenu1</a></li>
<li><a class="head" href="#">Submenu2</a></li>
</ul>
<!-- menu-submenu accordon-content-->
<li id="nav3" class="toggle accordion-toggle">
<span class="icon-plus"></span>
<a class="menu-link" href="#">Menu3</a>
</li>
<!-- accordion-toggle -->
<ul class="menu-submenu accordion-content">
<li><a class="head" href="#">Submenu1</a></li>
<li><a class="head" href="#">Submenu2</a></li>
<li><a class="head" href="#">Submenu3</a></li>
<li><a class="head" href="#">Submenu4</a></li>
</ul>
<!-- menu-submenu accordon-content-->
</ul>
<!-- menu-list accordion-->
</div>
<!-- menu-container -->

HTML - Navigation menu over header

I am building currently my web-page on Github (Githug Page), and I am having some troubles with the top-nav menu. As you can see, when you scroll down, the menu disappears, and when you scroll up, it appears again. Nevertheless, I would like to make the behaviour much more simpler, and that is, to make it fixed with respect the header. In other words, I just want the menu to appear on top of the page, like another element more. I do not want the menu to follow the scrolling. Looks simple but I do not end up getting the result.
This is my current 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;
}
The index.html file, where you can see, the important sections are header and 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><p style="color:white">Home</p></li>
<li><p style="color:white">Research</p></li>
<li><p style="color:white">Game-dev</p></li>
<li><p style="color:white">Photography</p></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 alvaradopinero.eduardo#gmail.com.</p>
<ul class="actions special">
<li>Discover</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>More</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>More</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>More</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>Sign Up</li>
<li>Learn More</li>
</ul>
</div>
</section>
-->
<!-- Footer -->
<section id="footer">
<ul class="icons">
<li><span class="label">CV</span></li>
<li><span class="label">Email</span></li>
<li><span class="label">GitHub</span></li>
<li><span class="label">Google Scholar</span></li>
</ul>
<ul class="copyright">
<li>© Untitled</li><li>Design: HTML5 UP</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>
And finally, the respective part of the 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;
}
To summarize, I would like the menu to be only on the top of the page, over the header, nothing more. I would really appreciate your help. I have tried several things but I still not very experimented in web-design, I am sorry.
Thank you very much in advance.

In the styling for #header_nav, set position to absolute instead of fixed. Then remove the following from main.js:
/* 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;
}
This way, the menu will render over the header but not stay at the top of the page when the user scrolls down.
Edit: If you want the menu to render above the header, not on top of it, remove the position line completely.

jQuery scroll down buttons won't work

I'm new to jQuery and I'm wondering why my scroll down button won't work. I have been looking at several forum feeds but I can't seem to figure out how to make it work. Here I'd like for the link-button with id="this_button" to make a smooth jump to id="group2".
The script to make the smooth scroll is pretty basic and has already been seen multiple times, so I can't figure out what I did wrong. If any of you has an idea of how to solve this, it'd be grateful (Does the parallax layers influence badly ?). Also, if something is not clear, don't hesitate to ask.
div = document.getElementById("div1").clientHeight;
list = document.getElementsByClassName("else");
for (var i = 0; i < list.length; i++) {
list[i].style.lineHeight=div-14+"px";
}
$(document).ready(function(){
$("a").on('click', function(event){
if (this.hash !== ""){
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top}, 800, function(){
window.location.hash = hash;
});
}
});
});
body{
font-family: 'Dosis';font-size: 19px;
margin: 0;
padding: 0;
}
header{
background-color: white;
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
}
header div{
margin:auto;
width:100%;
overflow: auto;
/*border:1px solid black;*/
}
header div ul{
list-style-type: none;
margin:auto;
width:100%;
}
header div ul li{
float:left;
/*border: .5px solid red;*/
}
header div ul li a{
display:block;
text-decoration: none;
color:black;
text-align:center;
transition: color .3s;
}
header div ul li a.first{
margin-left:100px;
margin-right:30px;
}
header div ul li a.else{
margin-left:20px;
margin-right:20px;
}
header div ul li a.active{
color:tomato;
}
#h2title{
margin-bottom:0px;
padding-bottom:0px;
margin-top: 0;
padding-top: 0;
}
header div ul li a:hover:not(.active){
color:tomato;
}
/*===========================================================================*/
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
font-size: 200%;
}
.parallax__group {
position: relative;
height: 150vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 50vh 0;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
border:1px solid black;
}
.parallax__layer--back {
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
}
/* centre the content in the parallax layers */
.title {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
color:white;
}
.huge{
font-size: 400%;
}
#group1{
z-index: 2;
}
#group1 .parallax__layer--back{
background-color:black;
}
#group2{
z-index: 5;
}
#group2 .parallax__layer--base{
background-color: white;
}
.button{
background-color: white;
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border: none;
padding: 11px 25px;
position:absolute;
left: 50%;
top: 72%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
outline:2px solid black;
transition: .4s;
}
.button:hover{
background-color: rgb(255,99,71,0.3);
outline: 2px solid white;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="div1">
<ul>
<li style="position:relative; top:10px;">
<a class="first" href="sthenos.html">
<h2 id=h2title>STHENOS MOVEMENT</h2>
<p style="margin-top:0px; padding-top:0px; margin-bottom:0; padding-bottom:0;">Lausanne</p>
</a>
</li>
<li><p>Accueil</p></li>
<li><p>Toi dans tout ça</p></li>
<li><p>Services entreprises/autorités</p></li>
<li><p>À propos</p></li>
<li><p>Contact</p></li>
</ul>
</div>
</header>
<body>
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--back"></div>
<div class="parallax__layer parallax__layer--base">
<div class="title">MASTER YOUR <span style="color:tomato">BODY</span>.</div>
<div class="huge title">STHENOS MOVEMENT</div>
<div>
Découvrir l'association
</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">BIEN</div>
</div>
</div>
</div>
</body>

It's just about hash property you use it's not functional with query, so instead you can do something like that
// I have commented that part because it's not related to the question
/*var div = document.getElementById("div1").clientHeight;
list = document.getElementsByClassName("else");
for (var i = 0; i < list.length; i++) {
list[i].style.lineHeight=div-14+"px";
}*/
$(document).ready(function(){
$("a").on('click', function(event){
if ($(this).attr('href') != ""){
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(this).offset().top}, 800, function(){
window.location.hash = hash;
});
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Animation</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="div1">
<ul>
<li style="position:relative; top:10px;">
<a class="first" href="sthenos.html">
<h2 id=h2title>STHENOS MOVEMENT</h2>
<p style="margin-top:0px; padding-top:0px; margin-bottom:0; padding-bottom:0;">Lausanne</p>
</a>
</li>
<li><p>Accueil</p></li>
<li><p>Toi dans tout ça</p></li>
<li><p>Services entreprises/autorités</p></li>
<li><p>À propos</p></li>
<li><p>Contact</p></li>
</ul>
</div>
</header>
<body>
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--back"></div>
<div class="parallax__layer parallax__layer--base">
<div class="title">MASTER YOUR <span style="color:tomato">BODY</span>.</div>
<div class="huge title">STHENOS MOVEMENT</div>
<div>
Découvrir l'association
</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">BIEN</div>
</div>
</div>
</div>
</body>
</html>

Try this, it is working.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function() {
scrollToAnchor(this.name);
});
});
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('.parallax').animate({scrollTop: aTag.offset().top},5000);
}
</script>

Collapsable sidebar / navigation menu

I'm coding a website, i have a navigation bar on top of it, and a sidebar on the left. I want to turn this Fiddle into this one. It can use CSS, JQuery, JavaScript and Bootstrap, when you click the icon, the sidebar drags out to the right. And when you click it again, it collapse to the left.
<ul id="navbar">
<li class="title" id="sidebar_switch"><i class="fa fa-bars" aria- hidden="true"></i></li>
<li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
<li class="title">Title</li>
</ul>

please have a look at the following solution based on your code using CSS3 translate:
HTML:
<div class="sidebar">
<p>
This sidebar goes all screen down, and if you scroll the webpage, the sidebar stays at the same place everytime, the scro
</p>
</div>
<div class="content">
<ul id="navbar">
<li class="title" id="sidebar_switch"><i class="fa fa-bars" aria-hidden="true"></i></li>
<li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
<li class="title">Title</li>
</ul>
<div class="main">
aaaaaaaaaa
</div>
</div>
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
font-family: sans-serif;
overflow: hidden;
}
a {
text-decoration: none;
}
.title {
float: left;
display: block;
padding: 14px 16px;
}
#navbar {
font-weight: bold;
text-align: center;
float: left;
background-color: #333;
color: white;
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
.sidebar{
position:fixed;
top:0px;
left:0px;
width:100%;
color:red;
}
.slide{
-webkit-transform: translate3d(25%,0,0);
}
.content{
width:100%;
height: 30em;
position:absolute;
left:0px;
top:0px;
background: white;
-webkit-transition:all .2s linear;
}
.content .slide{
-webkit-transform: translate3d(25%,0,0);
}
i{
cursor: pointer;
}
JS:
$('i').click(function(){
$('.content').toggleClass('slide');
});
JS Fiddle Demo

Categories

Resources