We Keep Coding

Image slides that fades when navbar is hit

I'm trying to make a replica of the slider on top of this google page: https://www.google.com/doodles
If someone could make a replica of the image slider with the bars, that would be great! I've tried to on my own but can't figure it out. Here's my try if it's helpful!
JAVASCRIPT:
<script>
var imgArray = [
'images/img1.gif',
'images/img2.gif',
'images/img3.jpg',
'images/img4.jpg'],
curIndex = 0;
imgDuration = 3000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function () {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
}, 500);
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
}
</script>
HTML:
<img class="slidershow" id="slider" src="images/img1.gif" onmouseover="slideShow()">
<div id="navigation">
<label for="r1" class="bar" id="bar1"></label>
<label for="r2" class="bar" id="bar2"></label>
<label for="r3" class="bar" id="bar3"></label>
<label for="r4" class="bar" id="bar4"></label>
</div>
</div>
CSS: --> Honestly, I wrote so much CSS that I don't know which ones relate, so I might have left a few out. Need to clean that up - Apologize in advance
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
color: #009cdc;
transition: all 0.3s ease 0s;
}
.nav_links li:hover a {
color: #2772ff;
}
#top-content {
display: block;
}
latest-nav li#latest-nav-1 {
background-color: #fa4842;
}
#latest-nav li.off {
border-top: 15px solid #fff;
}
#latest-nav li.off {
height: 5px;
opacity: 0.35;
}
#latest-nav li {
cursor: pointer;
float: left;
height: 5px;
transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-moz-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-webkit-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
width: 16.6%;
}
.slidershow {
height: 400px;
overflow: hidden;
}
.middle {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%,-50%);
}
#navigation {
position: absolute;
bottom: 35px;
left: 60%;
transform: translateX(-50%);
display: flex;
}
.bar {
border-top: 15px solid #fff;
width: 200px;
opacity: 0.35;
height: 5px;
cursor: pointer;
transition: 0.4s;
}
.slides {
width: 500%;
height: 100%;
display: flex;
margin-top: 30px;
}
.slide {
width: 20%;
transition: 0.6s;
}
.slide img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
width: auto;
}
latest .container img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
}
#bar1 {
background-color: #3875fc;
}
#bar2 {
background-color: #ff8809;
}
#bar3 {
background-color: #19be29;
}
#bar4 {
background-color: #fa4842;
}
Thanks so much!

I'm always happy to see newcomers devoting time to study. First of all, good job! Unfortunately I'm not a very good teacher, but I put together a little example of this slider you're working on. You can check it clicking here.
Basically what is going on is:
The HTML is divided into two sections: the slider & the navbar.
I hide all slides by default applying a display: none to them. They're only visible when I add an additional class.
Detect the hover method via javascript. Whenever the navbar item is hovered on, you will detect its position (I added a data attribute called data-position to find out which position it is) and show the correspondent slider.
So, if the navbar has the data-position of 2, I know that I must show the second slide. To do that, I use .slider .slider-item:nth-child(2).
As I mentioned I'm not the best at explaining, but I hope this helps you out a little bit. Keep studying and don't give up!
HTML:
<div class="wrapper">
<div class="slider">
<div class="slider-item slider-item--visible">
hello item 1
</div>
<div class="slider-item">
hello item 2
</div>
<div class="slider-item">
hello item 3
</div>
</div>
<nav class="navbar">
<span class="navbar-item navbar-item--selected" data-position="1"></span>
<span class="navbar-item" data-position="2"></span>
<span class="navbar-item" data-position="3"></span>
</nav>
</div>
CSS
.wrapper{
max-width: 1000px;
width: 100%;
margin: 0 auto;
display: block;
}
/* Slider */
.slider{
max-width: 100%;
width: 100%;
}
.slider-item{
display: none;
}
.slider-item--visible{
display: block;
}
/* Navbar */
.navbar{
max-width: 100%;
display: flex;
align-items: flex-end;
height: 8px;
}
.navbar-item{
max-width: 33.3%;
width: 100%;
display: block;
height: 5px;
cursor: pointer;
opacity: .5;
transition: all .32s ease;
}
.navbar-item--selected{
height: 8px;
opacity: 1;
}
/* Meaningless styles (colors) */
.navbar-item:nth-child(1){
background: salmon;
}
.navbar-item:nth-child(2){
background: lightblue;
}
.navbar-item:nth-child(3){
background: #19be29;
}
Javascript
const $navbars = document.querySelectorAll(`.navbar-item`);
function removeSelected(){
const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
if (!$selected){
return;
}
for (let each of $selected){
each.classList.remove("navbar-item--selected");
each.classList.remove("slider-item--visible");
}
}
for (let each of $navbars){
each.addEventListener("mouseover", function(){
removeSelected();
const position = each.getAttribute("data-position");
const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)
each.classList.add("navbar-item--selected")
$item.classList.add("slider-item--visible");
});
}

addEventListener adds incorrect properties on click - only on 320x480

TL DR it should be display: flex; opacity: 1
I have a menu which works in the following way:
On mouseenter or click, the menu is shown (display: flex, opacity: 1)
On mouseleave or click (outside the menu area) the menu is hidden (display: none, opacity: 0)
The problem occures when I try to "open" the menu in the Dev. Tools on 320x480 resolution.
When I click on the menu area, only #envelope does the transformation. #links (should also transform but don't becouse of the following reasons) which should get display: flex actually gets display: none assigned to it.
Note: It's working in full screen. Something is bothering him with the 320x480 res.
If I can elaborate or provide any additional information, let me know.
Thank you
function hide (){
document.getElementById("links").style.display = "none";
};
function show (){
document.getElementById("links").style.display = "flex";
document.getElementById("links").style.opacity = "1";
};
var menu = document.getElementById("menu");
menu.addEventListener("mouseenter", show);
menu.addEventListener("mouseleave", hide);
menu.addEventListener("click", show);
document.addEventListener("click", function (){
if (this != menu){
document.getElementById("links").style.display="none";
}
});
#menu{
height: 10vh;
background-color: red;
text-align: center;
transition: all 1s ease-out;
padding-top: 5vh;
}
#menu:hover{
color: red;
}
#envelope{
height: 0;
display: block;
background-color: blue;
min-width: 100%;
z-index: 1;
position: absolute;
left: 0;
content: "";
opacity: 0;
transition: all 1.3s ease-out;
}
#links{
height: 0;
display: none;
background-color: pink;
justify-content: center;
z-index: 2;
min-width: 100%;
opacity: 0;
transition: all 1s ease-in;
}
#google{
margin-top: -1vh;
width: 150px;
}
#mysite{
padding-left: 5%;
margin-top: -1vh;
width: 150px;
}
#menu:hover #envelope{
height: 100px;
opacity: 1;
}
#menu:focus #envelope{
height: 100px;
opacity: 1;
}
#menu:hover #links{
opacity: 1;
height: 300px;
}
#menu:focus #links{
opacity: 1;
height: 300px;
}
<div id="menu">Click here to browse the internet.
<div id="envelope">
<div id="links" >
<div><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></div>
<div style="width: 20%;"></div>
<div><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></div>
</div>
</div>
</div>

Don't use transition: all because the browser then need to loop through all properties, and it might cause lag.
Don't use position: absolute unless you have to.
I removed #envelope and inserted the "Click here ..." text in a label (explanation why below).
I arranged classes so I didn't have to repeat code.
Pure CSS solution below.
I made a little CSS hack, where I used a label and a checkbox to simulate a click. So when clicking on the label#menu-toggler, the (hidden) checkbox is checked, which triggers #menu-toggler:checked ~ #links.invisible. I had to add another class to #links, otherwise the low specificity wouldn't trigger the change.
html, body { /* new */
margin: 0px;
padding: 0px;
}
#menu {
height: 15vh; /* changed */
background-color: red;
text-align: center;
margin: 0.5rem; /* new */
}
#menu > input#menu-toggler { /* new */
display: none;
}
#menu > .tagline { /* new */
display: block; /* to get padding to work */
padding: 5vh 0px;
transition: opacity 1s;
}
#menu:hover > .tagline { /* new */
opacity: 0;
}
#menu > .tagline, /* new */
#menu > #links /* new */
{
transition-timing-function: ease-out;
}
#menu > #links {
display: flex;
justify-content: space-around; /* changed */
position: relative; /* changed */
left: -0.5rem; /* changed */
top: -5vh; /* changed */
opacity: 0;
height: 0;
width: 100vw; /* changed */
z-index: 1;
overflow: hidden; /* new */
background-color: pink;
transition-property: height, opacity;
transition-duration: 1.3s;
}
#menu:hover #links,
#menu-toggler:checked ~ #links.invisible { /* new */
height: 150px !important; /* changed */
opacity: 1 !important;
}
#links #google,
#links #mysite
{
width: 150px;
}
<div id="menu">
<input id="menu-toggler" type="checkbox" />
<label for="menu-toggler" class="tagline">Click here to browse the internet.</label>
<div id="links" class="invisible">
<div><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></div>
<div><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></div>
</div>
</div>

Image gallery hover overlay height problem

I'm trying to recreate a google image search layout with an image hover overlay effect.
The problem I'm facing is setting the correct height of the overlay, I managed to set the correct width via jQuery but I can't seem to get the height right. I'd like the overlay to fill the entire image and not only the top.
An example of the image hover overlay effect can be found here: Image hover overlay effect
Here is my jsFiddle, hover on top of the images to see the effect.
function picRow(selector) {
masterArray = [];
// create each lineArray and push it to masterArray
$(selector).each(function () {
// get "selector" css px value for margin-bottom
// - parse out a floating point number
// - and divide by the outer width to get a decimal percentage
margin = (parseFloat($(this).css("margin-bottom"), 10)) / ($(this).outerWidth());
marginRight = margin * 100 + "%";
// subtract subtract the total child margin from the total width to find the usable width
usableWidth = (1 - ((($(this).find("img").length) - 1) * margin));
// for each child img of "selector" - add a width/height as value in the ratios array
ratios = [];
$(this).find("img").each(function () {
ratios.push(($(this).attr('width')) / ($(this).attr('height')));
});
// sum all the ratios for later divison
ratioSum = 0;
$.each(ratios, function () {
ratioSum += parseFloat(this) || 0;
});
lineArray = [];
$.each(ratios, function (i) {
obj = {
// divide each item in the ratios array by the total array
// as set that as the css width in percentage
width: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
height: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
// set the margin-right equal to the parent margin-bottom
marginRight: marginRight
};
lineArray.push(obj);
});
lineArray[lineArray.length - 1].marginRight = "0%";
// alert(lineArray[lineArray.length - 1].marginRight);
masterArray.push(lineArray);
});
$(selector).each(function (i) {
$(this).find("img").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
"margin-right": masterArray[i][x].marginRight
});
});
$(this).find(".text").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
/*"height": masterArray[i][x].height,*/
"margin-right": masterArray[i][x].marginRight
});
});
});
}
$(document).ready(function () {
picRow(".image-row");
});
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
/*width:100px;*/
display:block;
}
.text {
position: absolute;
top: 0;
color:#9CBDBE;
font-weight:bold;
font-size:30pt;
background-color:#fff;
width: 100px;
/*height: 50px;*/
text-align: center;
padding: 1%;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-row">
<a href="#1" class="wrapper">
<span class="text">Hover text</span>
<img src="https://source.unsplash.com/random/768x960" width="768" height="960"/>
</a>
<a href="#2" class="wrapper">
<span class="text">Hover text</span>
<img src="https://source.unsplash.com/random/1280x851" width="1280" height="851"/>
</a>
</div>

The simplest way to achieve this with CSS(refer other's answers) but if you want to do with Jquery You can do something like this. get the height of each image and apply it to their corresponding .text class.
$(selector).each(function (i) {
$(this).find("img").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
"margin-right": masterArray[i][x].marginRight
});
});
$(this).find(".text").each(function (x) {
var imgHeight = $(this).parent().find("img").height();
$(this).css({
"width": masterArray[i][x].width,
"height": imgHeight,
"margin-right": masterArray[i][x].marginRight
});
});
});
Here is the working fiddle

You can try this CSS. I give the a tag .wrapper a width and height so that it can contain the span tag. Then the span stag `.text', I displayed block it then 100% the width and height so that it will occupy the space of the a tag. And lastly, I positioned absolute the image.
Please check my css code below:
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
display:block;
height: 200px;
width: 500px;
overflow: hidden;
}
.text {
position: absolute;
top: 0;
color:#9CBDBE;
font-weight:bold;
font-size:30pt;
background-color:#fff;
/* width: 100px; */
/*height: 50px;*/
text-align: center;
/* padding: 1%; */
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
height: 100%;
width:100%;
left: 0;
border: 1px solid;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
position: absolute;
top: 0;
left: 0;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}

I'm pretty sure this effect can be achieved in just CSS.
Here's my solution:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
* {
box-sizing: border-box;
}
.imgWrapper { position: absolute; }
.imgWrapper::before {
transition: all ease-in-out .2s;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.imgWrapper:hover::before {
background: red;
}
.imgWrapper:hover .middle {
opacity: 1;
}
.middle {
transition: all ease-in-out .2s;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: .5em;
}
.middle span {
white-space: nowrap;
}
<div class="imgRow">
<div class="imgWrapper">
<img src="https://via.placeholder.com/300x300" />
<div class="middle">
<span>Hello I am some text!</span>
</div>
</div>
</div>

add this.. i just changed text position values.
css
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
width:auto;
display:inline-block;
}
.text {
position: absolute;
top: 0;
left:0;
bottom:0;
right:0;
color:#9CBDBE;
font-weight:bold;
font-size:30pt;
background-color:#fff;
width: 100px;
/*height: 50px;*/
text-align: center;
padding: 1%;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display:flex;
justify-content:center;
align-items:center;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}

Sliding menu, how to slide both in and out?

I am trying to build a menu that slides in and out with the press of a button. Also, when menu is opened, it should slide out when clicked any part of the screen.
So far I have managed to create everything except the slide out effect, now the slide just disappears, without moving from right to left.
var navBtn = document.getElementById("navBtn");
var navMenu = document.getElementById("navMenu");
var container = document.getElementById("container");
navBtn.addEventListener("click", showMenu);
container.addEventListener("click", hideMenu);
navMenu.style.display = "none";
function showMenu(){
if(navMenu.style.display !== "none"){
navMenu.style.display = "none"}
else{navMenu.style.display = "block", container.style.background = "rgba(0, 102, 199, 1)";}}
function hideMenu(){
if(navMenu.style.display = "block"){
navMenu.style.display = "none", container.style.background = "lightblue";}}
#main-container {
width: 350px;
height: 600px;
border: 1px solid black;
position: absolute;
overflow: hidden;
}
#container {
width: 350px;
height: 100%;
display: absolute;
z-index: 1;
background: rgba(0, 102, 199, 0.8);
}
#navBtn {
width: 50px;
height: 50px;
background: red;
position: absolute;
z-index: 999;
}
#navMenu {
width: 250px;
height: 100%;
background: blue;
position: absolute;
z-index: 9999;
top: 0;
animation-name: slidein;
animation-duration: .5s;
}
#-webkit-keyframes slidein {
0% {transform: translateX(-200px);}
100% {transform: translateX(0px);}
}
#navMenu.close {
animation-name: slideout;
animation-duration: .5s;
}
#-webkit-keyframes slideout {
0% {transform: translateX(0px);}
100% {transform: translateX(-200px);}
}
<div id="main-container">
<div id="navBtn"></div>
<div id="container">
<div id="navMenu"></div>
</div>
</div>
Maybe someone could show me a way to achieve this? Basically the slide in effect should be the same as the slide in, just in a reverse way.

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
body {
font-family: "Lato", sans-serif;padding:40px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #B971BB;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #fff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<h2>Sidena Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>

html
<div id="main-container">
<div id="navBtn"></div>
<div id="container">
<div id="navMenu"></div>
</div>
</div>
jsCode
var navBtn = document.getElementById("navBtn");
var navMenu = document.getElementById("navMenu");
var container = document.getElementById("container");
navBtn.addEventListener("click", showMenu);
container.addEventListener("click", hideMenu);
//navMenu.style.display = "none"; // remove the display: none as you cannot animate display block to display none
function showMenu() {
container.classList.add('open');
}
function hideMenu() {
container.classList.remove('open');
}
and the css
#main-container {
width: 350px;
height: 600px;
border: 1px solid black;
position: absolute;
overflow: hidden;
}
#container {
width: 350px;
height: 100%;
z-index: 1;
background: rgba(0, 102, 199, 0.8);
transition: all 0.3s ease-in-out;
}
#navBtn {
width: 50px;
height: 50px;
background: red;
position: absolute;
z-index: 999;
}
#navMenu {
width: 250px;
height: 100%;
background: blue;
position: absolute;
z-index: 9999;
top: 0;
left: -250px;
transition: all 0.3s ease-in-out;
}
#container.open {
background: rgba(0, 102, 199,1);
}
#container.open #navMenu {
left: 0;
}

Looks like you attached the slide-out animation to a .close class that you never apply to the menu.
The easiest way to do this and to have more control is to add a class to the container, when the menu should be opened. afterwards just use css and left position along with transition to animate the menu. I'll provide code in a minute

Make sidebar fadein on scroll point

Been researching some way to make my side navigation bar fadein on a specific area of my website. Just not sure how to go about it. I found some jquery that is around the problem. But being new to the stuff im not sure how to implement it into my specific code.
The example given is
if ($(window).scrollTop() >= "number of pixels") {
if ($('"button plus number"').css('display') === 'none') {
$('"button plus number"').fadeIn('slow');
$('"button plus number"').prev().fadeOut();
$('"button plus number"').next().fadeOut();
}
}
So basically with my code I am wanting is to get .cbp-fbscroller to fade in or at least appear at about 900px. Also once i get an understanding of how it works I could then use the code to make other things fade in on scroll points as well.
Here is a basic fiddle so you guys can get the idea http://jsfiddle.net/vLf18Lbk/
HTML area for fadein:
<div class="main">
<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav>
Section 1
Section 2
Section 3
Section 4
Section 5
</nav>
<section id="fbsection1"></section>
<section id="fbsection2"></section>
<section id="fbsection3"></section>
<section id="fbsection4"></section>
<section id="fbsection5"></section>
</div>
</div>
CSS needing to fade in:
/* The nav is fixed on the right side and we center it by translating it 50%
(we don't know it's height so we can't use the negative margin trick) */
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 100px;
top: 50%;
width: 26px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

your jQuery code is correct.
when you scroll to bottom more than 250px fade in "go to top", in other wise fade out "go to top"
you can check line 41 of javascript
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
///// edit go to top
$(window).scroll(function() {
if ($(this).scrollTop() > (250)) {
$("#top").fadeIn('fast');
} else{
$("#top").fadeOut('fast');
};
});
$("a[href='gototop']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-family:'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family:'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url(images/home-bg2.png);
}
#portfolio {
background-image: url(images/portfolio-bg.png);
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
#top{
position: fixed;
bottom: 5px;
right: 5px;
background-color: #ffff00;
cursor: pointer;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="m1 menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>
go to top
In the same way you can select each tag fade or appearance.