We Keep Coding

Transparent Navbar not becoming transparent after onscroll function

So, I am preparing for a Web Designing Competition and I was testing out a transparent navbar that will become White if pageYOffset is greater than 100, but now, when i scroll back in the 100px range, the navbar remains white.
Here's my code
window.onscroll = function() {
var navbar = document.getElementsByClassName('navbar')[0];
if (window.pageYOffset > 100) {
navbar.style.background = "#fff";
} else {
navbar.style.background = "transparent";
}
}
.navbar {
height: 50px;
width: 100%;
font-family: Arial;
position: fixed;
background: transparent;
color: #fff;
top: 0;
left: 0;
}
.navbar h3 {
float: left;
margin-left: 30px;
margin-top: 20px;
}
.navbar a {
float: right;
padding: 18px;
margin-right: 30px;
text-decoration: none;
color: #333;
}
/** FOR TESTING IN SNIPPET */
body {
height: 1000px;
background: red;
}
<div class="navbar">
<h3>OmniFoods</h3>
Home
About
Contact
</div>

Close navigation when navigation item is clicked

My goal is for my hamburger menu to close when an item is clicked inside of it. As of right now, the menu only uses html and css.
The difference between this nav bar and others is that mine is created from a input checkbox html element, what i need is for my checkbox to uncheck when a link is clicked inside of the hamburger. This should close the entire menu just like it would if i clicked on the hamburger. Also, could you explain what and why the javascript does what it does, i don't have much experience with javascript, thanks. :)
I also made the checkbox visible just so that we can have a better understanding of whats going on.
My CSS:
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle:checked + .menu {
display: block;
}
}
My HTML:
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</div>

Javscript may not actually be required, depending on your needs.
If you give the div containing your nav links an ID you can target this with an a tag setting the href to the ID. Then you can use the :target selector to change the visibility of our navigation div.
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.toggle {
text-decoration: none;
color: #33334d;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
.toggle,
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
.toggle,
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#menu:target,
#toggle:checked+.menu {
display: block;
}
}
<div class="nav">
<a class="toggle" href="#menu">☰</a>
<div class="menu" id="menu">
example
example
example
example
example
example
example
</div>
</div>

Wow, interesting. It's a pretty weird practise, what you have, but it could work. You can make menu show/hide by input checked. Very interesting. I have never think of like that.
But also you will need a piece of JS code.
By CSS you can handle some basic selector like :hover, :focus, :active etc. In our your case you also make some interesting click event. But checkbox is not for that purpose.
Click and other event are handled by JS (more https://www.w3schools.com/js/js_events.asp).
So in our case, we select all links:
var links = document.querySelectorAll('.menu a');
then we have to add click event to every link, which will set our input to checked="false" = close menu.
This JS code will only work, when selected links are rendered, so you need to put this piece of code to the end of your html file before </body> or use window.onload...
var links = document.querySelectorAll('.menu a');
var linksLength = links.length
for(var i = 0; i < linksLength; i++) {
links[i].addEventListener('click', function() {
document.getElementById('toggle').checked = false;
});
}
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle {
display: none;
}
#toggle:checked + .menu {
display: block;
}
}
<label class="nav" for="toggle">
<div class="icon">☰</div>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</label>

two functions interfering with each other

So my first stab at web development is proceeding reasonably well.
However... I want to have two separate drop down menus, but the JavaScript functions are interfering with each other... That is, if both functions are active at the same time, clicking on one drop down will cause the other drop down to react or stop working. It is probably something massively stupid, but I have little time left. here is the code:
//Control sliding menu on screens smaller than a specified breakpoint.
(function(menu_button, links, breakpoint)
{
"use strict";
var menulink = document.getElementById(menu_button),
menu = document.getElementById(links);
menu.className = "start";
setTimeout(function()
{
menu.className = "collapsed";
}, 20);
menuLink.onclick = function()
{
if (menu.className === "displayed")
{
menu.className = "collapsed";
}
else
{
menu.className = "displayed";
}
return false;
};
window.onresize = function()
{
if (window.innerWidth < breakpoint)
{
menu.className = "collapsed";
}
};
})("menuLink", "navLinks", 700);
That was function No.1, here is No.2:
function dropFunction()
{
"use strict";
document.getElementById("myDropdown").classList.toggle("drop");
}
window.onclick = function(e)
{
"use strict";
if (!e.target.matches('.dropbtn'))
{
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var d = 0; d < dropdowns.length; d++)
{
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains("drop"))
{
openDropdown.classList.remove("drop");
}
}
}
}
and HTML if at all usefull:
<nav>
<p id="menuLink">MENU</p>
<ul class="displayed" id="navLinks">
<li>Home</li>
<li>Portfolio</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<div class="dropdownContent" id="myDropdown">
<img class="externalLink" src="images/faceBook.png" style="width:20px">
<img class="externalLink" src="images/linkedIn.png" style="width:20px">
<img class="externalLink" src="images/soundCloud.png" style="width:20px">
</div>
and CSS:
.nav
{
display: inline;
position: absolute;
bottom: 220px;
padding-right: 60px;
width: 100%;
background-color: transparent;
font-family: "verdana";
font-size: 20px;
text-align: center;
}
.nav li
{
display: inline;
}
.nav a
{
display: inline-block;
padding: 50px;
text-decoration: none;
color: #E4E4E4;
}
.nav a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
.nav a:active
{
color: #5B4CA8;
}
li.drops
{
display: inline-block;
}
.dropdownContent
{
display: none;
position: absolute;
background-color: transparent;
box-shadow: none;
minimum-width: 20px;
}
.dropdownContent a
{
color: transparent;
text-decoration: none;
display: block;
text-align: center;
}
.drop
{
display: block;
}
#menuLink
{
width: 100%;
background-color: transparent;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
#menuLink a
{
text-decoration: none;
font-family: "helvetica";
color: #E4E4E4;
}
#menuLink a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#menuLink a:active
{
color: #5B4CA8;
}
#navLinks
{
position: absolute;
list-style-type: none;
width: 100%;
background-color: transparent;
padding: 0;
margin: 0;
text-align: center;
z-index: 1;
opacity: 1;
-webkit-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
}
#navLinks a
{
display: block;
padding: 10px;
font-family: "helvetica";
color: #E4E4E4;
text-decoration: none;
font-size: 18px;
}
#navLinks a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#navLinks a:active
{
color: #5B4CA8;
}
#navLinks.start
{
display: none;
}
#navLinks.collapsed
{
top: -12em;
opacity: 0;
}
Thanks for your help!

You have used the window.Onlcick event to specify behaviors for the dropdowns if the user is not clicking on something with class "drop". This event will fire if you click on any item in that window because events bubble up like that in JavaScript.

Scroll to show footer

I have been trying to use parallax, to hide and show footer on scroll but due to the fact it targets the img this does not work.
i wrote this but it just pops up rather then the main content page sliding up to reveal the footer slowly.
SCRIPT
$(window).on('scroll', function() {
if ($(window).scrollTop() > 85) {
$('.footer').show();
} else {
$('.footer').hide();
}
});
here is any example: http://red-team-design.com/simple-and-effective-dropdown-login-box/
scroll to bottom to see the footer slide out.
Is there a pure css way of doing it? am i missing a trick here.
Thanks for your help
FIDDLE
https://jsfiddle.net/7uv2fzvp/2/

Yes, that's pure css.
Just need to put that position: fixed and z-index: 0, so like:
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
and the main content position: relative and z-index: 1
.main-content {
position: relative;
z-index: 1;
}
Here is the jsFiddle: https://jsfiddle.net/7uv2fzvp/11/

Demo on JSFiddle
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('footer').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
$('footer').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('footer').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
* {
margin: 0;
padding: 0;
}
body {
font: 15px/1.3 'PT Sans', sans-serif;
color: #5e5b64;
position: relative;
z-index: 0;
}
a,
a:visited {
outline: none;
color: #389dc1;
}
a:hover {
text-decoration: none;
}
section,
footer,
header,
aside {
display: block;
}
#main {
position: relative;
z-index: 1;
background-color: #fff;
padding: 120px 0 600px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
#main .tzine-logo {
width: 336px;
height: 121px;
margin: 0 auto 90px;
text-indent: -999px;
overflow: hidden;
display: block;
}
h1 {
font: bold 48px 'PT Sans Narrow', sans-serif;
color: #5e5b64;
text-align: center;
padding-bottom: 300px;
position: relative;
}
h1:after {
content: '';
width: 45px;
height: 70px;
position: absolute;
left: 50%;
bottom: -85px;
margin-left: -23px;
}
footer {
height: 245px;
color: #ccc;
font-size: 12px;
position: relative;
z-index: -2;
background-color: #31353a;
}
footer > ul {
width: 960px;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -480px;
padding-bottom: 60px;
z-index: -1;
}
footer > ul > li {
width: 25%;
float: left;
}
footer ul {
list-style: none;
}
footer > ul > li ul li {
margin-left: 43px;
text-transform: uppercase;
font-weight: bold;
line-height: 1.8;
}
footer > ul > li ul li a {
text-decoration: none !important;
color: #7d8691 !important;
}
footer > ul > li ul li a:hover {
color: #ddd !important;
}
footer p {
width: 90%;
margin-right: 10%;
padding: 9px 0;
line-height: 18px;
background-color: #058cc7;
font-weight: bold;
font-size: 14px;
color: #fff;
text-transform: uppercase;
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
opacity: 0.9;
cursor: default;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
footer > ul > li:hover p {
opacity: 1;
}
footer p:before {
content: '';
display: inline-block;
width: 16px;
height: 18px;
margin: 0 12px 0 15px;
vertical-align: text-bottom;
}
/*-------------------------
The different colors
--------------------------*/
footer p.home {
background-color: #0096d6;
background-image: -webkit-linear-gradient(top, #0096d6, #008ac6);
background-image: -moz-linear-gradient(top, #0096d6, #008ac6);
background-image: linear-gradient(top, #0096d6, #008ac6);
}
footer p.home:before {
background-position: 0 -110px;
}
footer p.services {
background-color: #00b274;
background-image: -webkit-linear-gradient(top, #00b274, #00a46b);
background-image: -moz-linear-gradient(top, #00b274, #00a46b);
background-image: linear-gradient(top, #00b274, #00a46b);
}
footer p.services:before {
background-position: 0 -129px;
}
footer p.reachus {
background-color: #d75ba2;
background-image: -webkit-linear-gradient(top, #d75ba2, #c75496);
background-image: -moz-linear-gradient(top, #d75ba2, #c75496);
background-image: linear-gradient(top, #d75ba2, #c75496);
}
footer p.reachus:before {
background-position: 0 -89px;
}
footer p.clients {
background-color: #e9ac40;
background-image: -webkit-linear-gradient(top, #e9ac40, #d89f3b);
background-image: -moz-linear-gradient(top, #e9ac40, #d89f3b);
background-image: linear-gradient(top, #e9ac40, #d89f3b);
}
footer p.clients:before {
background-position: 0 -69px;
}
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="http://cdn.tutorialzine.com/misc/enhance/v2.js"></script>
<div id="main">
<h1>slide-out footer.</h1>
</div>
<footer>
<ul>
<li>
<p>Test</p>
</li>
<li>
<p>Test</p>
</li>
<li>
<p>Test</p>
</li>
<li>
<p>Test</p>
</li>
</ul>
</footer>
There is a very good article that explains z-indexes in detail, which I highly recommend that you read before continuing further.

Well, Here is a codepen for you that i found.
https://codepen.io/cerebrovinny/pen/vYdJJVa
HTML:
Scroll down and say hello to the slide-out footer
<footer><p>Here i am. Ready to use me for navigation lists or other content.</p></footer>
CSS
* {margin:0; padding:0; font-family: Helvetica; font-weight:bold; font-size: 1.4em;text-align:center;}
section {width:100%; height:1024px; margin: 0 0 360px 0;background-color:#ececec; position:relative; z-index:2; color: #1e2024;}
footer {width:100%; height:360px;background-color:#262932; position:fixed; bottom:0; left:0; color: #ef4a4a; text-align:center; z-index:0;}
p {padding: 1em 4em;}

Scrollbar in bootstrap application wizard

I have implemented the bootstrap application wizard and it works great but how can I add a scrollbar to each of the pages or cards in this case?
Here is the modal card window without the overflow included:
Here is the css file I added the code for the scrollbar:
/* WIZARD GENERAL */
.wizard {
display:none;
}
.wizard-dialog {}
.wizard-content {}
.wizard-body {
padding: 0;
height: 1500px;
margin: 0;
overflow-y: scroll;
}
/* WIZARD HEADER */
.wizard-header {
padding: 9px 15px;
border-bottom: 0;
}
.wizard-header h3 {
margin: 0;
line-height: 35px;
display: inline;
font-family: 'Segoe UI';
font-family: inherit;
font-weight: bold;
text-rendering: optimizelegibility;
color: #030845;
}
.wizard-subtitle {
font-weight:bold;
color:#AFAFAF;
padding-left:20px;
}
/* WIZARD NAVIGATION */
.wizard-steps {
width: 28%;
background-color: #f5f5f5;
border-bottom-left-radius: 6px;
position: relative;
}
.wizard-nav-container {
padding-bottom: 30px;
overflow-y: scroll;
}
.wizard-nav-list {
margin-bottom: 0;
}
.wizard-nav-link .glyphicon-chevron-right {
float:right;
margin-top:12px;
margin-right:-6px;
opacity:.25;
}
li.wizard-nav-item.active .glyphicon-chevron-right {
opacity:1;
}
li.wizard-nav-item {
line-height:40px;
}
.wizard-nav-list > li > a {
background-color:#f5f5f5;
padding:3px 15px 3px 20px;
cursor:default;
color:#B4B4B4;
}
.wizard-nav-list > li > a:hover {
background-color: transparent;
}
.wizard-nav-list > li.already-visited > a.wizard-nav-link {
color:#030845;
cursor:pointer;
}
.wizard-nav-list > li.active > a.wizard-nav-link {
color:white;
}
.wizard-nav-item .already-visited .active {
background-color:#030845;
}
.wizard-nav-list li.active > a {
background-color:#030845;
}
/* WIZARD CONTENT */
.wizard-body form {
padding: 0;
margin: 0;
height: auto;
}
/* WIZARD PROGRESS BAR */
.wizard-progress-container {
margin-top: 20px;
padding: 15px;
width: 100%;
position: absolute;
bottom: 0;
}
.wizard-card-container {
margin-left: 28%;
}
/* WIZARD CARDS */
.wizard-error,
.wizard-failure,
.wizard-success,
.wizard-loading,
.wizard-card {
border-top: 1px solid #EEE;
display:none;
padding:35px;
padding-top:10px;
overflow-y:auto;
/*
position:relative;
height:300px;
margin-right: 5px;
*/
}
.wizard-card-overlay {
overflow-y: initial;
}
.wizard-card > h3 {
margin-top:0;
margin-bottom:20px;
font-size:21px;
line-height:40px;
font-weight:normal;
}
/* WIZARD FOOTER */
.wizard-footer {
padding:0;
}
.wizard-buttons-container {
padding:20px;
}
.wizard-cancel {
margin-left: 12px;
}
/* Inner Card */
.wizard-input-section {
margin-bottom:20px;
}
.wizard-dialog .popover.error-popover {
background-color:#F2DEDE;
color:#B94A48;
border-color:#953B39;
}
.wizard-dialog .popover.error-popover .arrow::after {
border-right-color:#F2DEDE;
}
.wizard-dialog .popover.error-popover .popover-title {
display:none;
}
.wizard-dialog .popover.error-popover .arrow {
border-right-color:#953B39;
}
When I added the overflow-y this happens:
It seems to show the scrollbar the right way but it also pushes up the navigation buttons. Any ideas on how to fix this would really help.

You need to set a height and overflow on the container.
.wizard-card-container {
height: 300px;
overflow-y: scroll;
}