We Keep Coding

Change text and image/video on click and scroll

I'm just a novice. I know some html, but I have no idea how to do the following:
there is an html page, it has a section or div with 3 columns (1st column - text, 2nd - video, in the 3rd column there are 4 links).
When the user scrolls to this section, I need the page to stop (I would like to but not necessarily), and while the person scrolls, it should change the text in the 1st column and the video in the 2nd(both same time) . And also the user should be able to scroll through these videos&text by clicking on the links in the 3rd column. How it is done here: fleet-app
It's written in React, so I can't to spy the solution.
I found this solution Javascript - change image and text on select, but I can't figure out how to apply it in my situation.
Is it possible to do this with Javascript or CSS or something else?
Please don't scold me too much - I'm just learning:)
The solution I got now is very ugly - example codepen.io/Avelaskes/pen/rNOKVbQ
(function($){
$(document).ready(function() {
// Scroll to Top
jQuery('.scrolltotop').click(function(){
jQuery('html').animate({'scrollTop' : '0px'}, 400);
return false;
});
jQuery(window).scroll(function(){
var upto = jQuery(window).scrollTop();
if(upto > 500) {
jQuery('.scrolltotop').fadeIn();
} else {
jQuery('.scrolltotop').fadeOut();
}
});
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
forEach(hamburgers, function(hamburger) {
hamburger.addEventListener("click", function() {
this.classList.toggle("is-active");
}, false);
});
}
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
})(jQuery);(function($){
$(document).ready(function() {
// Scroll to Top
jQuery('.scrolltotop').click(function(){
jQuery('html').animate({'scrollTop' : '0px'}, 400);
return false;
});
jQuery(window).scroll(function(){
var upto = jQuery(window).scrollTop();
if(upto > 500) {
jQuery('.scrolltotop').fadeIn();
} else {
jQuery('.scrolltotop').fadeOut();
}
});
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
forEach(hamburgers, function(hamburger) {
hamburger.addEventListener("click", function() {
this.classList.toggle("is-active");
}, false);
});
}
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
})(jQuery);
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Oswald:wght#200;300;400;500;600;700&family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 400;
background: #fff;
color: #333333;
}
a:hover {
text-decoration: none;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
::selection {
color: white;
background: #C840E9;
}
::-webkit-selection {
color: white;
background: #C840E9;
}
::-moz-selection {
color: white;
background: #C840E9;
}
.scrolltotop {
width: 40px;
height: 40px;
border-radius: 20px 20px 0 0;
background: #5773FF;
text-align: center;
padding-top: 8px;
font-size: 22px;
color: #ffffff;
position: fixed;
right: 5px;
bottom: 5px;
display: none;
transition: 0.2s all ease;
-webkit-transition: 0.2s all ease;
-moz-transition: 0.2s all ease;
}
.scrolltotop:hover {
background: #C840E9;
color: #fff;
box-shadow: 0px 0px 5px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
}
/*---- header-area start ----*/
.header-area {
background-color: #15161C;
padding: 25px 0;
}
.navbar {
padding: 0px;
}
.navbar-brand img {
max-width: 100%;
display: block;
transition: 0.2s all ease;
-moz-transition: 0.2s all ease;
-webkit-transition: 0.2s all ease;
}
.navbar-brand img:hover {
opacity: 0.8;
}
.main-menu-part ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.main-menu-part ul li {
float: left;
}
.main-menu-part ul li a {
font-family: 'Cabin', sans-serif;
display: block;
padding: 0px 5px 0px 52px;
text-transform: capitalize;
font-weight: normal;
font-size: 18px;
color: #fff;
transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
}
.main-menu-part ul li a:hover {
opacity: 0.8;
}
.hamburger {
padding: 10px 0px 0px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
outline: 0px!important;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #13F1FC;
border-radius: 2px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/*---- rkma-area start ----*/
.rkma-area {
background-color: #15161c;
}
.mnrkma_top {
background: url(img/bg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 60px 0;
padding-bottom: 545px;
}
.rkma_top h2 {
color: #fff;
font-size: 50px;
text-align: center;
font-weight: 600;
padding-top: 50px;
}
.rkma_top p {
font-family: 'Cabin', sans-serif;
color: #B7E6FF;
font-size: 16px;
text-align: center;
line-height: 25px;
padding-top: 5px;
}
.rkma_part {
position: relative;
-webkit-animation:animation-hci0jy 5s 2s infinite alternate;
animation:animation-hci0jy 5s 2s infinite alternate;
-webkit-animation-timing-function:cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function:cubic-bezier(0.43,0.05,0.6,0.99);
}
.rkma_part img {
width: 334px;
display: block;
margin: auto;
padding-top: 50px;
}
.rkma_part_1 {
position: absolute;
top: 0;
left: 24%;
-webkit-animation: animation-hci0jy 5s 2s infinite alternate;
animation: animation-hci0jy 5s 2s infinite alternate;
animation-timing-function: ease;
-webkit-animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
}
.rkma_part_2 {
position: absolute;
top: 0;
right: 24%;
-webkit-animation: animation-hci0jy 5s 2s infinite alternate;
animation: animation-hci0jy 5s 2s infinite alternate;
animation-timing-function: ease;
-webkit-animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
}
#-webkit-keyframes animation-hci0jy{
0% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
50% {
-webkit-transform:translateY(15px);
-ms-transform:translateY(15px);
transform:translateY(15px);
}
100% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
}
#keyframes animation-hci0jy{
0% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
50% {
-webkit-transform:translateY(15px);
-ms-transform:translateY(15px);
transform:translateY(15px);
}
100% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
}
/*---- smy-area start ----*/
.smy-area {
background-color: #15161C;
padding: 60px 0;
padding-top: 0;
}
.smy_top h2 {
color: #9F9F9F;
font-size: 52px;
font-weight: 700;
text-align: center;
}
.smy_top p {
color: #9F9F9F;
font-size: 27px;
font-weight: 700;
text-align: center;
padding-top: 5px;
padding-bottom: 30px;
}
.smy_left img {
max-width: 100%;
display: block;
}
.smy_left p {
font-family: 'Source Sans Pro', sans-serif;
color: #fff;
font-size: 25px;
font-weight: 600;
padding-left: 103px;
line-height: 35px;
margin-top: -68px;
}
.smy_right img {
width: 180px;
height: 120px;
border-radius: 100%;
display: block;
margin: auto;
border: 4px solid #B9B8B8;
}
.smy_right p {
color: #F2F2F2;
font-size: 18px;
text-align: center;
line-height: 25px;
padding-top: 16px;
}
/*---- tabbingsec-area start---*/
.tabbingsec-area2 {
display: none;
}
.tabs {
width: 100%;
display: inline-block;
}
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links {
padding-top: 110px
}
.tab-links li {
list-style: none;
padding-bottom: 19px;
}
.tab-links li i {
color: #C4C4C4;
font-size: 10px;
padding-right: 6px;
}
.tab-links a {
color: #E4E4E4;
font-size: 16px;
}
.tab-links a:hover {
text-decoration: none;
}
.tab-links li.active a {
color: #13F1FC;
}
/*----- Content of Tabs -----*/
.tab {
display: none;
}
.tab.active {
display: block;
}
#tabbingsec {
background: #15161C;
padding: 60px 0px;
}
.width60 {
width: 50%;
float: left;
}
.width60 h3 {
color: #9F9F9F;
font-size: 40px;
font-weight: 800;
padding-top: 60px;
padding-bottom: 6px;
}
.width60 p {
color: #AAABAB;
font-size: 28px;
line-height: 37px;
}
.width40 {
width: 50%;
float: left;
}
.width40 img {
max-width: 10%;
display: block;
margin: auto;
}
.width60 a {
width: 121px;
height: 46px;
line-height: 46px;
text-align: center;
color: #fff;
background:#ff8b38;
border-radius:3px;
font-size: 15px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="tabbingsec">
<div class="container">
<div class="tabs">
<div class="row">
<div class="col-lg-8 col-md-9 col-sm-6">
<div class="tab-content">
<div id="tab1" class="tab active">
<div class="width60">
<h3>First of all</h3>
<p>Decide where you will <br>enter into a position <br>and where you want<br> to put a stop order</p>
</div>
<div class="width40">
<img src="img/ph4.png" alt=""/>
</div>
</div>
<div id="tab2" class="tab">
<div class="width60">
<h3>In App</h3>
<p>Choose the calculator<br> depending on what<br> market you are working<br> or choose Universal</p>
</div>
<div class="width40">
<img src="img/ph5.png" alt=""/>
</div>
</div>
<div id="tab3" class="tab">
<div class="width60">
<h3>Balance</h3>
<p>Enter the amount of<br> balance or the amount<br> of money from which <br>you will count risk</p>
</div>
<div class="width40">
<img src="img/ph6.png" alt=""/>
</div>
</div>
<div id="tab4" class="tab">
<div class="width60">
<h3>Required</h3>
<p>Enter the price at wich<br> you plan to enter into <br>position and the price <br>of the planed stop order</p>
</div>
<div class="width40">
<img src="img/ph7.png" alt=""/>
</div>
</div>
<div id="tab5" class="tab">
<div class="width60">
<h3>Be WISE</h3>
<p>Chose the aceptable<br> risk amount in %.<br> The amount that you<br> are ready to loose in<br> case you wrong in your<br> predicrion</p>
</div>
<div class="width40">
<img src="img/ph8.png" alt=""/>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6">
<ul class="tab-links">
<li class="active"><i class="fas fa-circle" aria-hidden="true"></i>First step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Second step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Third step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Fourth step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Fivth step</li>
</ul>
</div>
</div>
</div>
</div>
</section>

Why does dropdown menu only work properly in header?

I just implemented a dropdown-menu that drops down when the user hovers/clicks the menu image.
However as soon as the user scrolls down to section2, then the dropdown stops to work properly. Either it simply does not drop down when the user hovers/clicks the dropdown image, or if it does, the menu items can't be clicked.
I can't see how the other sections can influence whether or not a fixed dropdown works.
Any suggestions?
thanks
var main = function() {
$(".dropdown img").click(function() {
$(".dropdown-menu").slideDown("slow");
});
$(".dropdown img").mouseenter(function() {
$(".dropdown-menu").slideDown("slow");
});
$(".dropdown ul").mouseleave(function() {
$(".dropdown-menu").slideUp("slow");
});
$(window).scroll(function() {
$(".dropdown-menu").slideUp();
$(".dropdown img").removeClass("rotate");
});
$(".dropdown img").mouseenter(function() {
$(".dropdown img").addClass("rotate");
});
$(".dropdown-menu").mouseleave(function() {
$(".dropdown img").removeClass("rotate");
});
};
$(document).ready(main);
html,
body {
font-size: 100%;
height: 100%
}
/*Header*/
.dropdown img {
height: 2.5em;
width: 3.5em;
}
.dropdown-menu {
background-color: rgba(0, 0, 0, 0.5);
}
.header {
background: url(/img/sri.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
position: relative;
box-shadow: inset 0 0 0 1000px rgba(125, 132, 145, 0.6);
min-height: 100%
}
.header ul li a {
color: #fff;
}
.header .logo {
float: left;
margin-top: 0.42em;
}
#rowheader {
margin-top: 5em;
}
.header .dropdown {
margin-top: 0.42em;
position: fixed;
right: 2em;
}
.dropdown img {
border-radius: 50%;
background: black;
height: 3em;
width: 3em;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
/* Safari */
transition: width 1s, height 1s, transform 1s;
}
.rotate {
-webkit-transform: rotate(180deg);
/* Safari */
transform: rotate(180deg);
}
.dropdown ul {
left: -8em;
width: auto;
position: absolute;
}
.header .logo p {
font-size: 1em;
color: black;
font-family: 'Permanent Marker', cursive;
font-weight: bold;
}
#rowheader h1 {
font-weight: bolder;
font-size: 3em;
position: relative;
color: #fff;
text-align: center;
}
/*Section1*/
#section1 {
text-align: center;
margin-top: 3em;
margin-bottom: 3em;
font-size: 1em;
height: auto;
position: relative;
font-family: 'Open Sans', sans-serif;
}
#section1 h2 {
font-size: 2em;
font-weight: bolder;
text-align: center;
padding: 0 2.5em 1em;
display: block;
}
#section1 p {
line-height: 1.8em;
font-size: 0.9em;
padding: 1em 0;
}
#section1 a {
color: #fff;
background: #007bb6;
text-decoration: none;
padding: 0.1em 0.5em;
border-radius: 5px 5px 5px 5px;
}
#section1 a:hover {
background: #005983
}
/*Section2*/
#section2 {
line-height: 1.8em;
height: auto;
margin-top: 2em;
margin-bottom: 2em;
position: relative;
}
#section2 h2 {
font-size: 2em;
font-weight: bolder;
text-align: center;
padding: 0 2.5em 1em;
display: block;
}
#section2 p {
padding: 0 0 0.5em;
font-family: 'Open Sans', sans-serif;
padding-bottom: 2em;
}
#section2 img {
width: 100%;
height: 100%;
}
#img-wrapper {
display: inline-block;
overflow: hidden;
}
#img-wrapper img {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#img-wrapper img:hover {
-webkit-transform: scale(1.1);
/* Safari and Chrome */
-moz-transform: scale(1.1);
/* Firefox */
-ms-transform: scale(1.1);
/* IE 9 */
-o-transform: scale(1.1);
/* Opera */
transform: scale(1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Header -->
<div class="header">
<div class="container">
<div class="logo">
<p>???</p>
</div>
<div class="dropdown">
<img src="img/menuwhite.jpg">
<ul class="dropdown-menu">
<li>Find me on Linkedin
<li>
<li>Send me an email
</li>
<li>Download my resume
</li>
</ul>
</div>
<div id="rowheader">
<h1></h1>
</div>
</div>
</div>
<!-- Section1 -->
<div id="section1" class="container">
<h2>About</h2>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>Me</h3>
<p>blablablabla</p>
<p>blablablablablablablablablqblablablablablablablablablablablablablablabla</p>
</div>
<!-- Section2 -->
<div id="section2" class="container">
<h2>My Projects</h2>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="img-wrapper">
<img src=" "">
</div>
</div>
</div>
</div>

You are missing z-index on .header .dropdown element
.header .dropdown {
margin-top: 0.42em;
position: fixed;
right: 2em;
z-index: 20;
}

how to start webkit animation after page load?

I have an animation with my header wrapper and I want the animation to start after the page completely loads.
However it seems like it starts before the page loads. I looked up a function on css tricks and that is what i am using here.
It seems the animation starts a little early. Any help with this?
From the post on css tricks i added a class "preload" to the body and then removed the class in my JavScript to start the animation but does not seem to work.
<!---------------------------HTML ------------------------>
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body class = "preload">
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper anim fadeInDown">
<div class = "heading">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
</body>
</html>
<!--------------------------------------CSS------------------------------>
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
/*----------------------------------------------------------HEADER-----------------------------------------------------------------------*/
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.fadeInDown{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
<!-----------------------------------------JS------------------------------>
$(window).load(function() {
$("body").removeClass("preload");
});

Remove .fadeInDown class from wrapper div
Make wrapper div display:none by default.
Add display:block !important; CSS to .fadeInDown class
On page ready add .fadeInDown class to wrapper div.
$( document ).ready(function() {
$(".wrapper").addClass("fadeInDown");
});
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.fadeInDown{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
display:block !important;
}
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body class="preload">
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper anim" style='display:none'>
<div class = "heading">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
</body>
</html>

This preload class prevents transitions, but not keyframe animations. It's also a bit hacky.
Instead of removing a class on page load, it might make more sense to add the fadeInDown class in your $(window).load function, which will cause the CSS animation to run immediately after the class is added. Just remember to remove that class from the HTML, as it will now be added in JS.
$(window).load(function() {
$(".wrapper").addClass("fadeInDown");
});

jQuery Jump Scroll

When a user clicks any link on the page they are jumped to the closest panel of 3 specific panels that have been indicated to jump scroll in jQuery.
How do I edit jQuery jump scroll code to only affect links in the nav bar ("About", "Work", "Contact") and no other links on the page as a user navigates content on the site?
CSS:
/****Landscape****/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a{
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: #000000;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus, a:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
width: inherit;
right: 0;
left: 0;
}
a:active { color: #484747; }
/*----/----global styles*/
/*contact panel*/
.letmeknow:hover {
color: #464c4c;
cursor:pointer;
transition: color 0.5s ease;
}
.letmeknow {
appearance: none;
width:80%;
height:50px;
font-size:1.05em;
background:transparent;
color: #e6e8eb;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
}
/*Contact submit Form*/
#container {
width: 840px;
margin: 25px auto;
}
.whysign {
float: left;
background-color: white;
width: 480px;
height: 347px;
border-radius: 0 5px 5px 0;
padding-top: 20px;
padding-right: 20px;
}
.signup {
float: left;
width: 300px;
padding: 30px 20px;
background-color: white;
text-align: center;
border-radius: 5px 0 0 5px;
}
[type=text] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.2);
height: 45px;
line-height: 45px;
margin-bottom: 10px;
font-size: 1em;
color: rgba(0,0,0,.4);
}
input[type="submit"] {
appearance: none;
width:80%;
height:50px;
font-size:1.05em;
background:transparent;
color: #e6e8eb;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
}
input[type="submit"]:hover {
color: #464c4c;
cursor:pointer;
transition: color 0.5s ease;
}
[type='text']:focus {
outline: none;
border-color: #53CACE;
}
span:hover {
color: #53CACE;
}
/*----/----contact form*/
/*Nav Bar*/
.header {
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
background: #ffffff;
float: right;
text-align: right;
}
.nav > li {
display: inline-block;
padding: 2px;
padding-right: 30px;
}
/*----/----Nav Bar*/
/*Panels*/
.panel {
width: 100%;
background: #000000;
color: #ffffff;
height: 40em;
padding: 3em;
box-sizing: border-box;
}
.links{
color: #ffffff;
}
.panel .inner {
padding-top: 10%;
color: #df
}
.panel.panel-blank {
background: #ffffff;
color: #000000;
}
/*----/----Panels*/
/*logo*/
.logo {
float:left;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/****Portrait****/
#media (max-width: 850px) {
/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
}
.header {
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.nav {
position: fixed;
width: 100%;
text-align: center;
display: none;
background-color: #ffffff;
left: 0;
top: 39px;
}
.nav > li {
postition: absolute;
display: block;
left: 0;
width: 100%;
padding-top: 0.6em;
padding-bottom: 1em;
}
.nav > li:hover {
postition: absolute;
display: block;
left: 0;
width: 100%;
padding-top: 0.6em;
padding-bottom: 1em;
cursor:pointer;
}
/*----/----global styles*/
/*logo*/
.logo {
float:left;
display: block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: black;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
}
/*----/----Portrait*/
.footer {
width: 100%;
background: #000000;
color: #ffffff;
height: 10em;
padding: 5em;
box-sizing: border-box;
}
jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
jQuery(document).ready(function () {
$(window).resize(function(){
if ($(window).width() >=850) {
$(".nav").show();
}
else{ $(".nav").hide();}
});
$('#toggle-menu').click(function () {
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
$("#toggle-menu").removeClass();
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
if ($(window).width() < 850) {
$(".nav").hide();
} else {
$(".nav").show();
}
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*Jump Scroll*/
$(function() {
var $window = $(window), $document = $(document),
transitionSupported = typeof document.body.style.transitionProperty === "string", // detect CSS transition support
scrollTime = 1; // scroll time in seconds
$(document).on("click", "a[href*=#]:not([href=#])", function(e) {
var target, avail, scroll, deltaScroll;
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
target = $(this.hash);
target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");
if (target.length) {
avail = $document.height() - $window.height();
if (avail > 0) {
scroll = target.offset().top;
if (scroll > avail) {
scroll = avail;
}
} else {
scroll = 0;
}
deltaScroll = $window.scrollTop() - scroll;
// if we don't have to scroll because we're already at the right scrolling level,
if (!deltaScroll) {
return; // do nothing
}
e.preventDefault();
if (transitionSupported) {
$("html").css({
"margin-top": deltaScroll + "px",
"transition": scrollTime + "s ease-in-out"
}).data("transitioning", scroll);
} else {
$("html, body").stop(true, true) // stop potential other jQuery animation (assuming we're the only one doing it)
.animate({
scrollTop: scroll + "px"
}, scrollTime * 1000);
return;
}
}
}
});
if (transitionSupported) {
$("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function(e) {
var $this = $(this),
scroll = $this.data("transitioning");
if (e.target === e.currentTarget && scroll) {
$this.removeAttr("style").removeData("transitioning");
$("html, body").scrollTop(scroll);
}
});
}
});
/*----/----Jump Scroll*/
/*contact let me know toggle*/
jQuery(".letmeknow").click(function () {
jQuery(".container").slideToggle();
});
/*----/-----contact let me know toggle*/
});
</script>
HTML:
<div class="header">
<div class="navbar">
LogoPlaceHolder
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="maincontent">
<div class="panel multiplepanels" id="panel1">
<div class="inner"> 1 </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel2">
<div class="inner"> <p>Work Title 1</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel3">
<div class="inner"> <p>Work Title 2</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel4">
<div class="inner"> <p>Work Title 3</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel5">
<div class="inner"> <p>Work Title 4</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel6">
<div class="inner"> <p>Work Title 5</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel7">
<div class="inner"> <p>Work Title 6</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel8">
<div class="inner"> <P>Like what I do?</P> </div>
</div>
<div class="panel multiplepanels" id="panel9">
<div class="inner"> <p>Social</p> </div>
</div>
</div>
<footer>
<div class="" id="panel10">
<div class="inner"> © 2015 thiswebsite.com</div>
</div>
</footer>

Give those elements a unique id or class and in the on() function, use those as the selectors:
$(document).on("click", "#uniqueId .orClass", function(e) {
//code
});

You can trigger the wanted click event only on the children of the .nav element by doing the following:
$(".nav").on("click", "a[href*=#]:not([href=#])", function(e) {
...
});
or
$(document).on("click", ".nav a[href*=#]:not([href=#])", function(e) {
...
});

Codepen JQuery Code Doesn't Work In My Browser

I've searched online for a solution to this problem for a while now. Unfortunately, no luck. Here is the website I'm using the code from http://codepen.io/anon/pen/wagbYZ
Here is my code:
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="main_h">
<div class="row">
<a class="logo" href="#">L/F</a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>Section 01</li>
<li>Section 02</li>
<li>Section 03</li>
<li>Section 04</li>
</ul>
</nav>
</div> <!-- / row -->
</header>
<div class="hero">
<h1><span>loser friendly</span><br>Batman nav.</h1>
<div class="mouse">
<span></span>
</div>
</div>
<div class="row content">
<h1 class="sec01">Section 01</h1>
<p>Hello World!</p>
<h1 class="sec02">Section 02</h1>
<p>Hello World!</p>
<h1 class="sec03">Section 03</h1>
<p>Hello World!</p>
<h1 class="sec04">Section 04</h1>
<p>Hello World!</p>
</div>
</body>
</html>
CSS:
#mixin small {
#media only screen and (max-width: 766px) {
#content;
}
}
$color: #8f8f8f;
$color2: #e8f380;
.main_h {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
#include small {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
.mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid lighten($color, 30%);
}
.logo {
width: 50px;
font-size: 25px;
color: $color;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
#include small {
float: none;
}
}
nav {
float: right;
width: 60%;
#include small {
width: 100%;
}
ul {
list-style: none;
overflow: hidden;
text-align: right;
float: right;
#include small {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
#include small {
width: 100%;
padding: 7px 0;
margin: 0;
}
}
a {
color: #888888;
text-transform: uppercase;
font-size: 12px;
}
}
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
#include small {
display: block;
}
span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: $color;
display: block;
}
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
color: $color;
background: white;
font-family: "Cardo", serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
}
.content {
padding: 50px 2% 250px;
}
.hero {
position: relative;
background: url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
h1 {
font-size: 50px;
line-height: 1.3;
span {
font-size: 25px;
color: $color2;
border-bottom: 2px solid $color2;
padding-bottom: 12px;
line-height: 3;
}
}
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid $color2;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -14px;
span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: $color2;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
JS:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
The HTML and CSS work fine, but the JQuery is giving me problems.

try wrapping the code in jquery document ready event
$(document).ready(function(){
//event listeners
});