We Keep Coding

Target This and Class not working as expected

For some reason, as you can see in my pen, when I hover over a learn more button it adds the details class to all the cards.
I've tried with no luck :
$(this).find('element')
And :
('', this)
//slick slider
$('.responsive').slick({
dots: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
//tilt
$('.tilt-card').tilt({
perspective: 1000,
})
//show details
$(".faction-more-btn").hover(
function() {
$('.description-overlay').addClass('desc-hover');
},
function() {
$(".description-overlay").removeClass('desc-hover');
}
);
$(document).ready(function() {
$('button').hover(function() {
$(this).text('Read More');
}, function() {
$(this).text('Learn More');
});
});
//scroll text
$(document).ready(function() {
var count;
var interval;
$(".faction-more-btn").on('mouseover', function() {
var div = $('.description-container');
interval = setInterval(function() {
count = count || 1;
var pos = div.scrollTop();
div.scrollTop(pos + count);
}, 100);
}).click(function() {
if (count < 6) {
count = count + 1;
}
}).on('mouseout', function() {
// reset the speed on out
count = 0;
clearInterval(interval);
$(".description-container").scrollTop(0);
});
});
* {
font-family: 'Exo', sans-serif;
}
body {
background: url("https://mankindreborn.com/wp-content/uploads/2018/04/newBG.jpg");
background-size: cover;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
padding-top: 100px;
}
img {
width: 100%;
height: 400px;
padding: 5px;
}
h2 {
text-align: center;
padding-bottom: 1em;
}
.slick-dots {
text-align: center;
margin: 0 0 10px 0;
padding: 0;
li {
display: inline-block;
margin-left: 4px;
margin-right: 4px;
&.slick-active {
button {
background-color: black;
}
}
button {
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: #999;
border: none;
width: 15px;
height: 15px;
border-radius: 50%;
}
:hover {
background-color: black;
}
}
}
/* Custom Arrow */
.prev {
color: #999;
position: absolute;
top: 38%;
left: -2em;
font-size: 1.5em;
:hover {
cursor: pointer;
color: black;
}
}
.next {
color: #999;
position: absolute;
top: 38%;
right: -2em;
font-size: 1.5em;
:hover {
cursor: pointer;
color: black;
}
}
#media screen and (max-width: 800px) {
.next {
display: none !important;
}
}
/* the slides */
.slick-slide {
margin: 0 10px;
}
/* the parent */
.slick-list {
margin: 0 -10px;
}
.slide {
position: relative;
}
.tilt-card {
overflow: visible;
transform-style: preserve-3d;
}
.faction-char-img {
width: 85%;
height: auto;
transform: translateZ(30px);
overflow: visible;
}
.faction-char-con {
position: absolute;
bottom: 0px;
}
.faction-logo-con {
position: absolute;
top: 10px;
}
.faction-logo {
width: 70%;
height: auto;
transform: translateZ(20px);
overflow: visible;
float: right;
margin-right: 10px;
}
.nsm-overlay {
position: absolute;
width: 96%;
margin-left: 6px;
top: 4px;
height: 200px;
background: url('https://i.imgur.com/xBr7FM1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: right;
transform: translateZ(30px);
}
.foe-overlay {
position: absolute;
width: 98%;
margin-left: 3px;
top: 4px;
height: 200px;
background: url('https://i.imgur.com/tyF6AgV.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: right;
transform: translateZ(30px);
}
.faction-more-btn {
position: absolute;
bottom: 20px;
margin-left: 53%;
z-index: 100;
transform: translateZ(50px);
background-color: #212121cc;
border: none;
color: #585858;
padding: 10px 20px 10px;
}
.faction-more-btn:hover {
background-color: #68ddda;
color: #000;
}
.description-overlay {
position: absolute;
width: 97%;
margin-left: 4px;
bottom: 0px;
height: 0%;
background-color: #0e0e0ef5;
z-index: 99;
transform: translateZ(37px);
transition: height 0.5s;
-webkit-transition: height 0.5s;
color: #fff;
padding-left: 25px;
padding-left: 25px;
}
.description-container {
margin-top: 20px;
overflow-y: scroll;
height: 185px;
padding-right: 20px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
.description-container::-webkit-scrollbar {
display: none;
}
.desc-hover {
position: absolute;
width: 97%;
margin-left: 4px;
bottom: 0px;
height: 100%;
background-color: #0e0e0ea6;
z-index: 99;
transform: translateZ(37px);
transition: height 0.5s;
-webkit-transition: height 0.5s;
}
.description-overlay h2 {
text-align: left;
font-size: 20px;
margin-top: 30px;
padding-right: 10px;
}
.faction-type {
color: #68ddda;
margin-top: -25px;
}
.faction-details {
font-size: 10px;
}
.foe-tower {
position: absolute;
top: 0px;
height: 100%;
width: auto;
transform: translateZ(20px);
}
.foe-logo {
margin-right: -8px;
margin-top: -9px;
}
.nsm-img {
width: 70%;
}
.nsm-logo {
margin-top: -10px;
width: 65%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/gijsroge/tilt.js/38991dd7/dest/tilt.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12 heroSlider-fixed">
<div class="overlay">
</div>
<!-- Slider -->
<div class="slider responsive">
<div class="tilt-card slide">
<img src="https://i.imgur.com/eHkER1D.jpg">
<div class="nsm-overlay"></div>
<div class="description-overlay">
<h2>NORTH STAR MINING</h2>
<p class="faction-type">MEGACORP</p>
<p class="faction-details"><b>BASED:</b> Upper Copper City, Venus, Sol.</p>
<p class="faction-details"><b>FOUNDED:</b> -</p>
<div class="description-container">
<br><br>
<p>One of the oldest corporations still in existence and one of the Big Three Megacorps, North Star Mining has its origins on pre-space Earth. In 2045, a former mine supervisor for SA Mines named Dawie Copper took advantage of the privatisation
of his former employers and purchased several palladium mines in South Africa. By the start of the Second Space Race in 2075, the Copper Mining Group (CMG), owned almost all of the mines in South Africa and Copper’s son Anton had taken
the reins of the company...</p>
</div>
<p class="learn-more-text"></p>
</div>
<div class="faction-logo-con">
<img class="faction-logo nsm-logo" src="https://i.imgur.com/9GiEkjB.png">
</div>
<button class="faction-more-btn">Learn More</button>
<div class="faction-char-con">
<img class="faction-char-img nsm-img" src="https://i.imgur.com/nOpzEfF.png">
</div>
</div>
<div class="tilt-card slide">
<img src="https://i.imgur.com/urJ0pyz.png">
<img class="foe-tower" src="https://i.imgur.com/jm9Gjvw.png">
<div class="foe-overlay"></div>
<div class="description-overlay">
<h2>FOLLOWERS OF ETERNITY</h2>
<p class="faction-type">ANARCHO-TERRORISTS</p>
<p class="faction-details"><b>BASED:</b> Unknown, speculated near New Terra</p>
<p class="faction-details"><b>FOUNDED:</b> -</p>
<div class="description-container">
<br><br>
<p>The slums of Earth’s Mega-Cities proved to be the perfect breeding ground for fanaticism and dissent. The Followers of Eternity have no grounded history; their origin is fragmented amongst the various slums from where they came. The faction
started life as a quasi-charity group sometime in the early 22nd century seeking to improve the lives of those who lived in the squalled urban centers; they soon realized that real change would only come through anarchy. The 'charity'
organized into street gangs and set up 'education hubs' from which their movement gained a mass following amongst the young, oppressed low entry union workers and the many forgotten who dwell at street level. The group's aim is simple,
resist the Union and their corrupt corporate masters - modeling themselves as 'enlightened anarchists' out to smash the system...</p>
</div>
<p class="learn-more-text"></p>
</div>
<div class="faction-logo-con">
<img class="faction-logo foe-logo" src="https://i.imgur.com/y3gH30H.png">
</div>
<button class="faction-more-btn">Learn More</button>
<div class="faction-char-con">
<img class="faction-char-img" src="https://i.imgur.com/x45t5zh.png">
</div>
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
</div>
<!-- control arrows -->
<div class="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
<div class="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
Live version on codepen

is this what you are looking for:
$(this).closest('.tilt-card').find('.description-overlay').addClass('desc-hover');
instead of
$('.description-overlay').addClass('desc-hover');
https://codepen.io/anon/pen/zJaPbQ
Your problem is that you are adding class to all elements with css class 'description-overlay', you have to add only to the one inside current tilt-card

Working codepen.
That happens because of the hover part bellow, you're using class selector $('.description-overlay') that will select all the elements with this class and add/remove class desc-hover.
$(".faction-more-btn").hover(
function() {
$('.description-overlay').addClass('desc-hover');
},
function() {
$(".description-overlay").removeClass('desc-hover');
}
);
Should use $(this) to target the related .description-overlay div of every button :
//show details
$(".faction-more-btn").hover(
function() {
$(this).siblings(".description-overlay").addClass('desc-hover');
},
function() {
$(this).siblings(".description-overlay").removeClass('desc-hover');
}
);
NOTE : Both functions you've tried doesn't work since they look inside the current hovered button when the div is a sibling of the button, so you could use siblings() function or the combination of parent()/closest() method and find() like :
$(this).parent().find(".description-overlay");
$(this).closest('.tilt-card').find(".description-overlay");
$(this).siblings(".description-overlay")

Getting my "beer" vertical progress bar to work

I'm trying to make a progress bar that looks like emptying glass of beer. Unfortunately I'm not very artistic person but I'm doing my best.
My concept goes like this:
There is a <div> with "beer" background, 100% high vertically. It hides any overflow
Inside there's another <div>, positioned relatively to the parent. It contains:
White background <div> to obscure "beer" pattern when it's gone
The image of beer foam cap
Here's the concept on picture:
I almost succeeded in my goal, as you can see in this snippet:
Note: the animation requires ES6 async/await
Promise.timeout = function (delay) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
};
Promise.animationFrame = function () {
return new Promise((resolve) => {
requestAnimationFrame(resolve);
});
};
(async function () {
const progress = document.querySelector("div.top");
for (let i = 0, l = 1000; i < l; ++i) {
progress.style.bottom = (100 - i / 10) + "%";
await Promise.animationFrame();
}
})();
html, body, div {
margin: 0px;
padding: 0px;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
div.progress {
max-width:300px;
width: 100vw;
float: left;
position: relative;
overflow: hidden;
height: 100%;
background-image: url("https://i.imgur.com/SKfSqEv.jpg");
background-size: 500px;
border-right: 1px solid black;
}
div.progress div.top {
height: 100vh;
position: relative;
bottom: 100%;
}
div.progress div.top div.white{
background-color: white;
width:100%;
height:100%;
}
div.progress div.top div.beer-top {
/*background-image is at the bottom since it is bse64 */
background-repeat: repeat-x;
background-position-y: bottom;
background-position-x: left;
background-size: 302px, 100px;
height: 100px;
}
/*div.progress div.top {
background-position: bottom;
height: 100%;
background-image: url("img/beer-top.png");
}*/
div.main {
float: left;
}
div.progress div.top div.beer-top {
background-image: url('https://preview.ibb.co/k2x2V6/beer_top.png');
}
<div class="progress">
<div class="top">
<div class="white"></div>
<div class="beer-top"></div>
</div>
<!--<div class="progress-area">
</div>-->
</div>
<div class="main">
</div>
But there are two big issues:
This ugly orange line:
Because I set div.white height to 100%, the foam is pushed down and is visible even at "100%" state. It also disappears completely at the end. The desired state is this:
How to fix those two issues?
I'm looking for CSS only solution, so that the bar can be displayed statically as well (eg. at 40% when the page loads without javascript).
Also note: setting the foam as background for the "white div" is not an option, because the bottom of the foam image is transparent.

Because there was a need for a CSS only solution. You could add the foam to your 'white' div as a background and a white gradient (ofcourse some tweeking is needed with the image to show up perfectly).
See JSfiddle:
Promise.timeout = function (delay) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
};
Promise.animationFrame = function () {
return new Promise((resolve) => {
requestAnimationFrame(resolve);
});
};
(async function () {
const progress = document.querySelector("div.top");
for (let i = 0, l = 1000; i < l; ++i) {
progress.style.bottom = (100 - i / 10) + "%";
await Promise.animationFrame();
}
})();
html, body, div {
margin: 0px;
padding: 0px;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
div.progress {
max-width:300px;
width: 100vw;
float: left;
position: relative;
overflow: hidden;
height: 100%;
background-image: url("https://i.imgur.com/SKfSqEv.jpg");
background-size: 500px;
border-right: 1px solid black;
}
div.progress div.top {
height: 100vh;
position: relative;
bottom: 100%;
}
div.progress div.top div.white{
background-color: white;
width:100%;
height:100%;
}
div.progress div.top div.beer-top {
/*background-image is at the bottom since it is bse64 */
background-repeat: repeat-x;
background-position-y: bottom;
background-position-x: left;
background-size: 302px, 100px;
height: 100px;
}
/*div.progress div.top {
background-position: bottom;
height: 100%;
background-image: url("img/beer-top.png");
}*/
div.main {
float: left;
}
div.progress div.top div.beer-top {
background-image: url('https://preview.ibb.co/k2x2V6/beer_top.png');
}
.top {
background: no-repeat;
background-position: bottom;
background-image: url('https://preview.ibb.co/k2x2V6/beer_top.png'),linear-gradient(to top, rgba(0,0,0,0) 1%, rgba(255,255,255,1) 5%);
}
<div class="progress">
<div class="top">
</div>
<!--<div class="progress-area">
</div>-->
</div>
<div class="main">
</div>

So the fixes I figured out were:
Add margin-top: -1 to div.beer-top to erase the orange line. The white and foam divs now overlap, so the div under then doesn't shine through.
Use display: flex to make the div.white fill all space except the div.beer-tops space.
div.progress div.top {
height: 100%;
position: relative;
bottom: 100%;
/**Modern flexbox layout*/
display: flex;
flex-direction: column;
}
div.progress div.top div.white{
background-color: white;
width:100%;
/*fill remaining space*/
flex-grow: 1;
}
Promise.timeout = function (delay) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
};
Promise.animationFrame = function () {
return new Promise((resolve) => {
requestAnimationFrame(resolve);
});
};
(async function () {
const progress = document.querySelector("div.top");
for (let i = 0, l = 1000; i < l; ++i) {
progress.style.bottom = (100 - i / 10) + "%";
await Promise.animationFrame();
}
})();
html, body, div {
margin: 0px;
padding: 0px;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
div.progress {
max-width:300px;
width: 100vw;
float: left;
position: relative;
overflow: hidden;
height: 100%;
background-image: url("https://i.imgur.com/SKfSqEv.jpg");
background-size: 500px;
border-right: 1px solid black;
}
div.progress div.top {
height: 100%;
position: relative;
bottom: 100%;
/**Modern flexbox layout*/
display: flex;
flex-direction: column;
}
div.progress div.top div.white{
background-color: white;
width:100%;
/*fill remaining space*/
flex-grow: 1;
}
div.progress div.top div.beer-top {
/*background-image is at the bottom since it is bse64 */
background-repeat: repeat-x;
background-position-y: bottom;
background-position-x: left;
background-size: 302px, 100px;
height: 100px;
/** this should hide the blinking orange line atop*/
margin-top:-2px;
}
/*div.progress div.top {
background-position: bottom;
height: 100%;
background-image: url("img/beer-top.png");
}*/
div.main {
float: left;
}
div.progress div.top div.beer-top {
background-image: url('https://preview.ibb.co/k2x2V6/beer_top.png');
}
<div class="progress">
<div class="top">
<div class="white"></div>
<div class="beer-top"></div>
</div>
<!--<div class="progress-area">
</div>-->
</div>
<div class="main">
</div>

jquery popup window only pulling last popup div

I am trying to have a link open a popup window that holds some inline HTML and an image when the user clicks on the link.
I've gotten it to work so that each link opens the popup window, but it will not show the right content - It keeps pulling the last hidden div instead of the one for the link that is clicked on.
;(function($){
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#popup,#popup2,#popup3,#popup4').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#popup,#popup2,#popup3,#popup4'));
return false;
});
});
$.prototype.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
})(jQuery);
#media screen and (max-width:980px) {
.hide {
font-weight: bold;
color: #0f2c6a;
display: block !important;
}
}
.hide {
display: none;
}
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
box-shadow: 0 0 100px 450px rgba(0,0,0,0.2);
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
text-align:left;
min-width:500px;
max-width: 1200px;
min-height: 00px;
max-height: 820px;
z-index:99999;
padding: 25px 25px 25px;
margin: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#media screen and (max-width:480px) {
.messagepop {
min-width: 300px !important;
max-width: 330px !important;
min-height: 300px !important;
max-height: 330px !important;
}
.pop-right {
font-size: 16px;
}
}
#media screen and (max-width:980px) {
.messagepop {
min-width: 600px;
max-width: 650px;
min-height: 400px;
max-height: 640px;
}
.pop-right {
font-size: 20px;
}
}
#media screen and (max-width: 768px) {
.messagepop {
min-height: 500px;
max-height: 550px;
min-width:335px;
max-width:385px;
}
.pop-right {
font-size: 18px;
}
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
#close {
position: absolute;
top: -10px;
right: -10px;
background: #000;
border-radius: 40px;
border: 1px solid #fff;
width: 25px;
height: 25px;
}
#close a {
color: #fff;
font-size: 15px;
line-height: 20px;
text-decoration: none;
text-align: center;
width: 25px;
height: 25px;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pop-left {
float: left;
width: 50%;
}
.pop-right {
float: right;
width: 50%;
padding-left: 20px;
font-size: 20px;
line-height: 1.7em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 1</div>
<div class="pop-right">Right 1</div>
</div>
<a id="popup" href="#popup">View Details</a>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 2</div>
<div class="pop-right">Right 2</div>
</div>
<a id="popup2" href="#popup2">View Details</a>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 3</div>
<div class="pop-right">Right 3</div>
</div>
<a id="popup3" href="#popup3">View Details</a>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 4</div>
<div class="pop-right">Right 4</div>
</div>
<a id="popup4" href="#popup4">View Details</a>
As you can see it's only pulling the last 'messagepop pop' div.

you are trying to select and fire events on your elements using the class selector. The class selector will give you the array like object for all the matching elements for the class.
What you need to do is to find the exact element which is clicked, you have $(this) jquery object in your click events which tell you which exact element is clicked by user.
Now you will have to get the other elements by using this exact element $(this).
Make the changes as below in your code.
(function($){
function deselect(e) {
e.prev().slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#popup,#popup2,#popup3,#popup4').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$(this).prev().slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
var link = $(this).parent().parent().next().attr("id");
deselect($("#"+link));
return false;
});
});
$.prototype.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
})(jQuery);
Working example : http://jsfiddle.net/SRw67/3042/

You are calling all ".pop" divs at the same time they fall over each other so you always see the last one

JQuery: Open/Close Menu, Opens but doesn't close

I'm trying to do a menu that hides on the left side and when we click on the button it opens or closes. I have the following code but the menu just opens, the code for closing isn't working, someone have a clue about what I did wrong?
var menu = function() {
/* Open Menu*/
$('.js_open_seta').click(function() {
$('.js_menu').animate({
left: "0px"
}, 200);
$(".js_open_seta").addClass("js_close_seta");
$(".js_open_seta").removeClass("js_open_seta");
});
/* Close Menu*/
$('.js_close_seta').click(function() {
$('.js_menu').animate({
left: "-240px"
}, 200);
$(".js_close_seta").addClass("js_open_seta");
$(".js_close_seta").removeClass("js_close_seta");
});
};
$(document).ready(menu);
body{
background: url("imagens/exp.jpg");
background-repeat: no-repeat;
background-size: 1280px 800px;
padding: 0;
margin: 0;
border: 0;
}
.js_menu{
background: #4d4d4d;
top: 0px;
left: -240px;
position: fixed;
width: 310px;
height: 100%;
text-align: center;
font-family: 'Lato', sans-serif;
color: #ffffff;
z-index: 50;
padding: 0;
margin: 0;
border: 0;
}
#js_exp, #js_open{
float: left;
background: #4d4d4d;
height: 100%;
}
#js_exp{
width: 240px;
}
#js_open{
border-left: #ff0000;
width: 70px;
text-align: center;
vertical-align: middle;
}
#js_seta{
margin-top: 325px;
width: 70px;
height: 70px;
}
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="js_menu">
<section id="js_exp">
SMPC
NGC Informática(2015)
NGC Informática (2015-2016)
</section>
<section id="js_open">
<img src="http://vignette1.wikia.nocookie.net/ladygaga/images/4/40/Seta.png/revision/latest?cb=20110522223038&path-prefix=pt" class="js_open_seta" id="js_seta"/>
</section>
</nav>
</div>

var menu = function() {
$('#js_seta').click(function() {
var check = $("#js_seta").hasClass("js_open_seta");
if(check) {
$('.js_menu').animate({
left: "0px"
}, 200);
$(".js_open_seta").addClass("js_close_seta");
$(".js_open_seta").removeClass("js_open_seta");
} else {
$('.js_menu').animate({
left: "-240px"
}, 200);
$(".js_close_seta").addClass("js_open_seta");
$(".js_close_seta").removeClass("js_close_seta");
}
});
};
$(document).ready(menu);
This works

Scroll full page

Here's a little code I wrote that would not use fullpage.js
I want to change it to scrollTop instead of position relative and "top": -_.index() * 100 + "%" with overflow:hidden
Please tell me how to do it. I attached the top menu (header-bg) and a search-wrapper.
New JSFiddle
JQuery:
$(document).ready(function() {
onLoad();
NavAnimation();
DesktopResize();
$("body").css({
overflow: 'hidden'
});
/*$(window).bind('scroll', function() {
if ($(window).scrollTop() > 726) {
$('.search-wrapper').addClass('fixed');
}
else {
$('.search-wrapper').removeClass('fixed');
}
}); */
});
function DesktopResize(){
$(".section, .fullpage, html, body").css({
height: '100%',
width: '100%'
});
}
function NavAnimation(){
scroll.call(active, true);
}
var active = null;
function scroll(silent){
var _;
if (active === null) {
_ = $(".section").first();
} else {
active.removeClass("active");
_ = $(this);
}
if (_.length === 0) return;
if (active !== null || silent === false) {
$(".fullpage").animate({"top": -_.index() * 100 + "%"}, 1000);
}
active = _;
}
function onLoad() {
$(".navigation li").click(scroll);
scroll();
}
var wheel = true;
window.addEventListener('wheel', function(event) {
if (wheel) {
wheel = false;
if (event.deltaY > 0) {
scroll.call(active.next());
} else {
scroll.call(active.prev());
}
setTimeout(function () {
wheel = true;
}, 1000)
}
});
window.addEventListener('mousewheel', function(event) {
if (wheel) {
wheel = false;
if (event.wheelDelta < 0) {
scroll.call(active.next());
} else {
scroll.call(active.prev());
}
setTimeout(function () {
wheel = true;
}, 1000)
}
});
HTML:
<div class="header-bg">
<div class="header-content">
<div class="navigation">
<ul>
<li id="NavWho">Rules</li>
<li id="NavMission">Arrivante Miles</li>
<li id="NavApproach">Prices</li>
</ul>
</div>
</div>
</div>
<div id="fullpage" class="fullpage">
<div class="section">
<br>
<br><br>
<br>
<div class="search-wrapper">
<div class="explain">Type your initial<br> flight number here:</div>
<div class="input">
<input type="text" placeholder="Example: FR22">
</div>
<div class="button">
<button class="search">Book transfer</button>
</div>
</div>
</div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
CSS:
html, body {
background: #d8e6e3;
position: relative;
}
.section{
height: 100% !important;
width: 100%;
}
.header-bg{
background: #242928;
color: #879996;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 500;
}
.header-bg .header-content{
max-width: 1800px;
margin: 0 auto;
font-family: "HelveticaNeue-roman";
text-transform: uppercase;
}
.header-content .login{
background: url("../image/login-ico.png") no-repeat;
background-position: 0 0;
height: 15px;
width: auto;
padding: 0px 0 0 35px;
margin: 25px 0 0 30px;
float: left;
cursor: pointer;
}
.header-content .navigation{
margin: 0 auto;
max-width: 486px;
}
.header-content .navigation ul{
list-style-type: none;
font-size: 0;
}
.header-content .navigation ul li{
display: inline-block;
font-size: 14px;
padding: 25px 25px 25px 25px;
cursor: pointer;
}
.fullpage{
position: relative;
}
.section{
padding: 66px 0 0 0;
margin: 0 auto;
max-width: 1800px;
}
.section .header-image{
position: relative;
}
.section .header-image .header-bg-image{
width: 100%;
height: 659px;
background: url("../image/head-1.jpg") no-repeat;
background-position: center center;
background-size: cover;
}
.section .header-image .main-logo{
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -120px;
}
.section .search-wrapper{
font-size: 0;
position: relative;
}
.search-wrapper .explain,
.search-wrapper .input,
.search-wrapper .button{
display: inline-block;
vertical-align: top;
}
.search-wrapper .explain{
padding: 26px 0 22px 24px;
font-family: "HelveticaNeue-roman";
font-size: 14px;
line-height: 16px;
color: #586664;
text-transform: uppercase;
background: #fffce5;
width: calc(20% - 24px);
}
.search-wrapper .input{
width: 60%;
font-size: 14px;
}
.search-wrapper .input input{
border: none;
padding: 26px 0 11px 26px;
font-size: 36px;
line-height: 36px;
color: #bcccc9;
width: calc(100% - 26px);
font-family: "HelveticaNeue-thin";
}
.search-wrapper .button{
width: 20%;
height: 100%;
font-size: 14px;
font-family: "HelveticaNeue-roman";
}
.search-wrapper .button .search{
font-family: "HelveticaNeue-roman";
font-size: 32px;
line-height: 32px;
color: #fff;
background: #ff4255;
width: 100%;
height: 80px;
border: none;
cursor: pointer;
outline: none;
}

OK still not really sure what you exactly want but have a look here:
$(document).ready(function () {
$(".navigation li").click(function () {
activeSection = $(this).index();
scrollMeToSection();
});
var activeSection = 0;
var wheel = true;
function scrollMeToSection() {
$('body').animate({
scrollTop: ($(window).height() * activeSection)
}, '1000', 'swing', function () {
// can do something when finishes animating here.
});
}
$(window).on('mousewheel DOMMouseScroll', function (event) {
console.log(event);
event.preventDefault();
event.stopPropagation();
if (wheel) {
wheel = false;
var goingUp = event.originalEvent.deltaY > 0 ? false : true;
if (activeSection === 0 && goingUp) {
wheel = true;
return;
}
activeSection = goingUp ? (activeSection - 1) : (activeSection + 1);
if (activeSection == $('.section').length) {
activeSection = $('.section').length - 1;
}
scrollMeToSection();
setTimeout(function () {
wheel = true;
}, 1000);
}
});
});
Demo:http://jsfiddle.net/robschmuecker/yYJ3z/
This works on mousewheel scroll but not on scroll-bar scroll (which is a more than somewhat complex process to manage).