We Keep Coding

How do I keep navbar hidden until scroll down, and disappear when back to top of page?

I want the navbar on my page to be hidden until the user scrolls down the page; also, I'd like to keep the hamburger in the top left. I've been trying to use something along the lines of
function showNav() {
if (window.pageYOffset >= visible) {
navbar.classList.add("visible");
} else {
navbar.classList.remove("hidden");
}
}
but it's not working and I think I am going about this the wrong way. Any help or suggestions would be welcome. Here is the jsfiddle link. Thanks again!

ScrollToTop button displaying at the top when page is refreshed

I am trying to get my scrollToTop button to stop showing when at the top
I have the button working, as in it fades in when scrolling down, and scrolls to the top when clicked, and then hides, but if I am the top of the page and hit refresh the button displays. Is there a way to prevent this?
Here is my code:
<img src="img/up-arrow.png" class="up-arrow"/>
And my JS:
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},500);
return false;
});
});
Thanks.

You need to make sure its default setting is that it is not appearing, use CSS.
The Javscript will then take care of the rest and override this when needed.
.scrollToTop {
display:none;
}

jQuery - make sticky footer stop at the top of footer and become sticky again on scroll up

I have a form that is sticky on every page, and I need it to stop being sticky when it reaches the top of the footer. I have this working properly, but I need it to become sticky again when scrolling back up the page. Anything glaringly wrong?
$(window).scroll(function(){
var footerTopPos = $('#footer-wrapper').offset().top;
var navBottomPos = $('#footer-form-wrapper').offset().top;
if(navBottomPos >= footerTopPos) {
$('#footer-form-wrapper').addClass('sticky');
} else {
$('#footer-form-wrapper').removeClass('sticky');
}
});
To clarify, the first part works perfectly. The css changes from "fixed" to "absolute" and the form stays in place. The problem is, I want it to revert back to "fixed" when you start scrolling back up the page (my else statement). This part does nothing at all.
Here is a rough jsfiddle to show the issue http://jsfiddle.net/L693f5bg/14/

--Edit--
To keep what you have started with the same and not use any other plugins you have to make sure you are declaring the variable outside the scroll function so that it doesn't get changed every time you scroll and change its position.
$(function () {
var footerTopPos = $('#footer-form-wrapper').offset().top;
$(window).scroll(function () {
var windowTopPos = $(window).scrollTop();
if (windowTopPos >= footerTopPos) {
$('#footer-form-wrapper').css('position', 'absolute');
$('#footer-form-wrapper').css('top', '0');
} else {
$('#footer-form-wrapper').css('position', 'fixed');
$('#footer-form-wrapper').css('bottom', '0');
$('#footer-form-wrapper').css('top', 'auto');
}
});
});
Updated your JSFiddle
Personally I recommend using Waypoints.js and the sticky elements plugin. It does everything and it's super clean and easy to implement. include the jquery.waypoints.js and the sticky plugin then initialize using:
var sticky = new Waypoint.Sticky({
element: $('#footer-wrapper')[0],
offset: '90%',
stuckClass: 'unstuck'
});
I updated the JSFiddle using the Waypoints.js plugin

Slide DIV Right to Left with jQuery

I'm using jQuery code to animate a div from left to right on load, and then by clicking the close button the div hides from right to left. It's working fine, it's just not going left to right horizontally but diagonally. What am I doing wrong? Here's an example of the code I'm using http://jsfiddle.net/N8NpE/2/
$(function(){
$("#content-box").hide(0).delay(0).show(500);
});
$(function(){
$("#ClosePanel").click(function () {
$("#content-box").hide("slow");
});
});
Any help will be greatly appreciated.

You could try using .animate() instead of .hide() and .show(). This will give you a little more control over everything.
$("#content-box").animate({'width': 240},500);
And to close, include a callback function to set display to none after the animation:
$("#content-box").animate({'width': 0},500,function(){
$("#content-box").css('display','none');
});
http://jsfiddle.net/N8NpE/6/

You should include jQuery UI in your script and change your function a little bit:
$(function(){
$("#content-box").hide(0).delay(0).toggle('slide', {
direction: 'left'
}, 1000);
});
Here is an updated jsfiddle: http://jsfiddle.net/N8NpE/4/

$('#content-box').animate({width: 'toggle'});
http://jsfiddle.net/U7wGt/

javascript scroll back to the top

how can I get this scroll back to the top neat thing from this link , just scroll down a bit, you'll see in the bottom right icon(top pointer) that scrolls back to the top on click. Thank you

In jQuery:
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
You can then make links like this:
Back to the top

You can find the script here:
http://www.javascriptkit.com/jkincludes/scrolltopcontrol.js
Although you need to use jquery for this script to work.