Develop Reference

Scrolling on Android Mobile not working

I am trying to make my site responsive.But no matter how much I scroll it still keeps me on the same div element.I am using a plugin called jquery-momentum-scroll.js and a plugin called vide.js.The wrapper covering the whole is given below-
#main {
height: inherit;
bottom: 0px;
transition: transform 1.2s ease-out;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
padding: 0px;
z-index: 2;
display: block;
backface-visibility: hidden;
}`
The element that is showing no matter how much I scroll is given below-
#banner_wrapper {
margin-top: 55px;
width: 100%;
height: 900px;
position: relative;
top: 0;
left: 0;
opacity: 0.4;
z-index: 0;
}
I have tried removing the "position: fixed;" property but still that did not do the trick.But when I resize the browser it shows fine.The link of the site is given below-
https://robustious-methods.000webhostapp.com/

The reason the #main section is taking over the view-port no matter where you scroll, is because you are using position: fixed; for the element's positioning.
With position: fixed, this takes the element out of the flow of the document, and fixes it relative to the screen. In this case, you've set it to take up 100% of the width and using top: 0; bottom: 0; in your styling, you're telling it to take up 100% of the height also.
If you want to keep the element in the flow of the document, change position: fixed to position: relative; on the #main selector, or remove it completely.
If you'd like to maintain the full height banner, in the #banner_wrapper selector, remove height: 900px; and add height: 100vh;.
More reading about CSS positioning here.

Scrolling fixed header displays farther down then desired

I am having some difficulties with a scrolling fixed header I am creating. I found a good example of it on here and now I am trying to make it work with my changes to it and I am trying to adapt it.
I put additional divs than what were in the example and now whenever I scroll past the yellow bar, the red bar(my header) displays way lower than I want.
I created a fiddle to show what it is doing.
https://jsfiddle.net/zoue6gv7/
This worked until I added my top margin to my div id join_login. It now is that far away from the top.
#join_login {
position: absolute;
right: 15%;
top: 27px;
font-size: 1em;
color: #383838;
}
How can I get this header to stay fixed at the top after I get to my scroll point?

Is this what you want? https://jsfiddle.net/zoue6gv7/1/
I just removed the margin-top -50px and replaced it with
top: 0;

This should do the trick! You can just eliminate the space above #logo by adding margin-top: -15px
#logo {
position: absolute;
left: 15%;
top: 22px;
font-size: 2em;
margin-top: -15px;
}

Just kidding! I think I misunderstood what you're trying to do, if you want the red Header to stick to the top of the page even when you scroll down:
Use position: fixed; to tell the header to stay in the same location regardless of scrolling
Use top: 0px; to tell the header, that the location you'd like it to be fixed to is the very top of the page
header {
position: fixed;
top: 0px;
width: 100%;
height: 75px;
background: red;
z-index: 100;
border-bottom: 1px solid #888888;
}

Partially hiding fixed footer on click

My fixed footer has an arrow icon on top of it. Clicking the arrow should "lower" the footer below the page until only the arrow is visible. Clicking it again should bring back the footer.
I tried playing with the bottom value but it doesn't hide the footer, only pushes it below while the page becomes taller to make room for it:
$('#footer_arrow').toggle(function() {
$('#footer_wrap').css('bottom', '-84px');
}, function() {
$('#footer_wrap').css('bottom', '0');
});
I want the same but with the footer actually disappearing below the page with just the arrow visible on top of it.
MARKUP:
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
CSS:
#footer_wrap {
position: absolute;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(images/footer_arrow.jpg) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}

A couple things. First off, I recommend using toggleClass() instead of toggle(). That way, you can just add a class with the required CSS, and toggle it using toggleClass(). This way, you can change any styles necessary from pure CSS, instead of making the modifications in the JavaScript code. However, the toggle() from jQuery's event handling suite that you are currently using will work just fine nonetheless.
Secondly, to move the footer off screen, you'll need to use fixed positioning instead of absolute on #footer_wrap. Otherwise, the bottom is moving relative to the page, which means it just extends it. However, with fixed, the element is positioned at a fixed point in the viewport, which can be moved off screen without extending the page.
$('#footer_arrow').click(function() {
$('#footer_wrap').toggleClass('down');
});
#footer_wrap {
position: fixed;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(http://www.placehold.it/61x23) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
.down {
bottom: -84px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>

What You have to do imho is not .toggle() a #footer_arrow element. You need to .toggle() a #footer_wrap element after clicking on #footer_arrow
Look into this fiddle: http://jsfiddle.net/tdcrsn2j/
I've changed Your HTML & CSS a little, but You can bring it back. It was done just to show case.

go with this
when you want to show
$('#footer_wrap').css({"display":"block"});
when you want to hide
$('#footer_wrap').css({"display":"none"});

jQuery mouse enter/leave not correctly detecting hovering area

I looked around what I would like to achieve, but I wasn't able to find any suitable answer.
Basically I can't make the code to correctly detect mouse entering and leaving a div that is overlapping another div.
This is my current situation:
Working demo: http://jsfiddle.net/2f5xx73y/
HTML:
<div style='height: 100%; width: 100%;padding: 30%;'>
<div class='box'>
<div class='inner-box'>Merry xmas!</div>
</div>
<div class='box'>
<div class='inner-box'>Happy new year!</div>
</div>
</div>
CSS:
.box {
height: 100px;
width: 100px;
display: inline-block;
position: relative;
background-color: green;
}
.inner-box {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
z-index: 1;
}
.zoomed-inner-box {
height: 160%;
width: 160%;
top: -30%;
left: -30%;
position: absolute;
background-color: red;
z-index: 1;
}
JS:
$(".inner-box").mouseenter(function () {
$(this).attr("class", "zoomed-inner-box");
});
$(".inner-box").mouseleave(function () {
$(this).attr("class", "inner-box");
});
As you can see there are two boxes which become bigger when hovered overlapping the other box.
Going right to left everything works fine, in fact the red div goes away as soon as the mouse leave it. This doesn't happen in the opposite direction, where a mouseleave event it's fired as soon as the cursor enters the green div behind the red one, while I want the red div to go away when the mouse completely leave it.
I also tried using the :hover selector for the inner-box class but it has the exact same behaviour. Do you know a nice solution to this problem?

Just change the z-index on .zommed-inner-box to overwrite the .inner-box's z-index. That way the currently hovered box has a higher z-index than .inner-box :
.inner-box {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
z-index: 1; <---- original z-index
}
.zoomed-inner-box {
height: 160%;
width: 160%;
top: -30%;
left: -30%;
position: absolute;
background-color: red;
z-index: 2; <---- higher z-index
}
FIDDLE

.toggleClass not toggling a certain class, but is working on all others

So I have a page on my website that has some navigation elements that stick on the page when the user scrolls past a certain point. There are three of them, one on the top, one on the left, and one on the right. HTML and CSS is as follows:
<div id="nav" class="nav">
<!--STUFF CONTAINED IN TOP NAV BAR-->
</div>
<div class="right" id="right">
<!--STUFF CONTAINED IN RIGHT NAV-->
</div>
<div class="left" id="left">
<!--STUFF CONTAINED IN LEFT NAV BAR-->
</div>
.nav {
position: absolute;
top: 108px;
height: 45px;
width: 100%;
left: 0;
right: 0;
}
.nav_sticky {
position: fixed;
top: 0;
height: 45px;
left: 0;
right: 0;
background-image: url(images/backgrounds/stardust_#2X.png);
z-index: 10;
}
.right {
width: 200px;
height: 900px;
position: absolute;
right: 50%;
margin-right: -538px;
top: 153px;
}
.right_sticky {
width: 200px;
height: 900px;
position: fixed;
right: 50%;
margin-right: -538px;
top: 45px;
}
.left {
width: 200px;
height: 900px;
position: absolute;
left: 50%;
margin-left: -538px;
top: 153px;
}
.left_stick {
width: 200px;
height: 900px;
position: fixed;
left: 50%;
margin-left: -538px;
top: 45px;
}
I then use the follow JQuery to cause these elements to stick.
<script>
$(document).ready(function(){
var navPos = $('#nav').offset().top;
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
if (scrollTop >= navPos) {
var classNamee = $('#nav').attr('class');
console.log(classNamee);
if (classNamee === "nav") {
$("#nav").toggleClass('nav nav_sticky');
$("#right").toggleClass('right right_sticky');
$("#left").toggleClass('left left_stick');
}
}
if (scrollTop <= navPos) {
var className = $('#nav').attr('class');
console.log(className);
if (className === "nav_sticky") {
$("#nav").toggleClass('nav_sticky nav');
$("#right").toggleClass('right_sticky right');
$("#left").toggleClass('left left_stick');
}
}
});
});
</script>
Here's my problem. This works perfectly for the top and right navs, however no matter what I try, the left nav continues to scroll when the others have stopped. I thought it may have been a typo in the css class, but when I looked in the inspector, the .toggleClass function doesn't even change the class on the #left element when it does on the other two. Any ideas as to what could be causing this?

If I copy/paste your sample code as-is to jsFiddle and run it, when you scroll down far enough, it does correctly toggle everything to *_sticky classes, but something about the negative margin-right on the right class element seems to reset the scroll to the top (at least in Chrome) when it flips between .right and .right-stick. When the scroll gets reset, it also reruns your event handeler and changes all the classes back.
Try removing these lines from your CSS and see if the behavior works right (it does in Chrome in a jsFiddle)
.right {
...
/*margin-right: -538px;*/
.right-stick {
...
/*margin-right: -538px;*/