We Keep Coding

Hide Menu on scroll down (but only after 50px)

This script makes it so when you scroll down in a browser the navigation bar disappears/hides behind the header. I was wondering if it was possible if instead it hid as soon as you scrolled down, hiding it after a user scrolls down a certain number of pixels (say 50px) to avoid touchy nav hiding on slightest scroll.
Thanks in advance for any direction.
// Nav scroll test
var prev = 0;
var $window = $(window);
var nav = $('#belowhead');
$window.on('scroll', function(){
var scrollTop = $window.scrollTop();
nav.toggleClass('hidden', scrollTop > prev);
prev = scrollTop;
});

You can put this inside your "window.on('scroll')" function:
if(scrollTop > 50) {
nav.addClass('hidden');
} else {
nav.removeClass('hidden');
}

2019 Update / Adjustment
The following could be useful for anyone else wishing to develop a header that disappears when you scroll down. I just finished making the following for a website I'm creating that required the top header to disappear when the user started scrolling, but then reappear when they start scrolling up; continuously applying this logic if you were to constantly keep scrolling up and down on the website.
For starters, a class is added to my header tag called nav-scrolled when the user scrolls past a certain point - 50px in this case. This new class can then be styled to change the background-color, add a box-shadow etc...
$(function() {
var header = $(".nav-container");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.addClass("nav-scrolled");
} else {
header.removeClass("nav-scrolled");
}
})
});
However, this only solved the problem of not being able to edit the headers styles if the user is scrolling from the top of the page - not anywhere on the site - the following fixes this.
var userScroll;
var scrollTop = 0;
var delta = 5;
var navHeight = $('header').outerHeight();
$(window).scroll(function(event){
userScroll = true;
});
setInterval(function() {
if (userScroll) {
hasScrolled();
userScroll = false;
}
}, 250);
The next step for me was to sequentially add and remove classes show-nav and hide-nav that had been styled to display and hide the navigation menu. The following checks whether the user has scrolled (up or down) to a value higher than my delta variable. If the user is beginning to scroll up on the website, the class show-nav is added and the header transitions in from the top of the page. If the user is scrolling down the page the class hide-nav is added, and the header is hidden.
function hasScrolled() {
var st = $(this).scrollTop();
// Ensures a higher scroll than $delta
if(Math.abs(scrollTop - 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 > scrollTop && st > navHeight){
// Scroll Down
$('header').removeClass('show-nav').addClass('hide-nav');
$('.nav-toggle').removeClass('open');
$('.menu-left').removeClass('collapse');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('hide-nav').addClass('show-nav');
}
}
scrollTop = st;
}

never ending scrolling page (scrolling top and back to bottom of the page or otherwise)

I want to know a code for continuous website that if i scroll to the bottom and will get back to top, and otherwise.
i already in a half way that i used this code for the bottom page :
$(document).ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
});
});
how can i make conversely?
from top to the bottom page?
EDIT:
$(document).ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
else if ($(window).scrollTop() <= 0) {
$(document).scrollTop($(document).height());
}
});
});
i tried that code and it works, but i think there is a little bug there, i need to scroll a bit more to get to bottom from top or otherwise, why is that happen?
Thanks

scrollTop can't go below 0, so you probably want to leave a buffer at the top of the page which sends you to the bottom when you scroll above it.
Something like this:
var BUFFER = 10;
$(document).ready(function() {
$(document).scrollTop(BUFFER);
$(document).scroll(function(){
var scrollPos = document.documentElement.clientHeight + $(window).scrollTop();
if (scrollPos >= $(document).height()) {
$(document).scrollTop(BUFFER);
} else if (scrollPos < BUFFER) {
$(document).scrollTop($(document).height());
}
});
});

i think this will help
window.scrollTo(0,document.body.scrollHeight);
or if you want to use jQuery get it from this thread

How to have a div change opacity when scrolling? (Parallax)

I was wondering how to create something like a parallax scrolling effect. The farther you scroll down, the more opaque the div gets, and after a certain point, it starts getting more transparent again. I know JS/JQuery is required to do this. Can someone give me a simple way to achieve this?

you should use scrolltop and implement your own logic regarding the math and the div opacity will change as you scroll
this is the function: $(window).scrollTop()

I have created a fiddle for you to help: Basically you can listen for the scroll event, and control the css opacity property based on the direction.
var opc = 1;
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
changeOpacity(0, -0.1)
} else {
changeOpacity(1, +0.1)
}
lastScrollTop = st;
});
function changeOpacity (limit, amount) {
if(opc !== limit){
opc = opc + amount;
$('#content').css('opacity' , opc);
}
}
http://jsfiddle.net/Mvf67/1909/
Hope this helps!

Adding a class to a div when the user has scrolled down an X amount of pixels

I'm using the code below to add/remove a class depending on which direction a user is scrolling. As of now, the class gets added as soon as the user scrolls down from point 0. I would like the class to get added when the user scrolls down at least an X amount of pixels. I tried changing the 0 in the lastScrollTop variable but it didn't work. Can someone help me out?
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('#masthead').addClass('unpinned');
} else {
$('#masthead').removeClass('unpinned');
}
lastScrollTop = st;
});
Note: The code is set so that the class gets removed as soon as the user starts scrolling back up from any point. I would like to keep this aspect.

All you need to do is wrap that jQuery addClass call in an if statement checking the size of st like this:
if(st > 2000) $('#masthead').addClass('unpinned');
That will only add the class once the user has scrolled down 2000px.

This will work for you
var scrollLimit = 600;
var lastScrollTop;
$(window).scroll(function(event){
var st = $(this).scrollTop();
console.log(st,lastScrollTop);
if (st > scrollLimit){
$('#masthead').addClass('unpinned');
}
if(st < lastScrollTop){
$('#masthead').removeClass('unpinned');
}
lastScrollTop = st;
});
DEMO

On ScrollDown, I want to animate my nav bar to go left and hide, On ScrollUp I want my nav bar to go right and appear

This is the code I have and currently it slides the nav bar left and right, continuously, while I scroll, I need it to slide in leftwards only once as I am scrolling down. Then when I scroll up I want it to slide out to the right and re-appear:
var scrollTop = $(window).scrollTop();
if (scrollTop > lastScrollTop && scrollTop > pixelsFromTheTop){ // ensure that the header doesnt disappear too early
// downscroll
$header.one("scrollDown", function () { $('navbar').animate({width: "toggle",},250)})(settings.transitionTime);
} else {
// upscroll
$header.animate({width: "toggle",},250);(settings.transitionTime);
}
lastScrollTop = scrollTop;
}
};
I used this plugin to help me get started: HidingNavBarPlugin Can anyone help me figure this out? :)