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;
}

Using jQuery in certain screen sizes

I need a mobile navigation to stick after the user has scrolled a certain amount. When a user has scrolled 205px on desktop resolution the navigation will stick no problem.
How do I change this to 64px after the screen size has gone below 767px? and how do I cancel the desktop jQuery from taking effect on a mobile?
Current desktop javascript:
$(window).scroll(function(){
if ($(this).scrollTop() > 205) {
$('.sidemenu').addClass('fixed');
} else {
$('.sidemenu').removeClass('fixed');
}
});
Current mobile javascript:
function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
$(window).scroll(function(){
if ($(this).scrollTop() > 64) {
$('.sidemenu').addClass('fixed');
} else {
$('.sidemenu').removeClass('fixed');
}
})
}
};
Suggestions would be much appreciated.
Thank you.

You can add a class mobile to your body for example when the matchmedia matches.
$(document.body).toggleClass('mobile', window.matchMedia('(max-width: 767px)').matches);
Once you have that, the checkPosition simply has to get the proper scrollTop value.
function checkPosition() {
var scrollY = $(document.body).hasClass('mobile') ? 64 : 205;
$('.sidemenu').toggleClass('fixed', $(window).scrollTop() > scrollY);
};
Or simply add the matchMedia test instead of the hasClass test.
Additionally, I expect the height of the "fixed container" to be dynamic.
Maybe something like:
var scrollY = $('header').height(); // just an idea ofcourse to get 64 or 205.

You can check screens size in resize wvent like this
var width;
$(window).resize(function () {
width = $("html").width();
});
than in scroll event (or in other place) you can check:
if (width <= 767) {
// do some for small screen
}
else if (width > 767 && width < 1200) {
// do some for medium screen
}
//if..

Trouble centering and dynamically resizing image using jQuery

Usually I'm able to figure things out given enough time (hence my first post here), but I've been beating my head against the wall for a while now on this one.
I'm trying to:
Center image using jQuery (it's an <img> tag, not background image on a <div>),
Load the correct image size on (window).load, and
Load a new img file at certain breakpoints as the window is re-sized.
Here is my current attempt. The centering script works perfectly. Also, the correct image file is loaded. However, I cannot get the re-size portion to work when the window is made wider or narrower (the image file does not dynamically reload).
CODE:
<!-- Center Floating Div Elements -->
<script>
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
$(window).load(function(){
$('.laptop').center();
window.onresize = function(event) {
$('.laptop').center();
}
});
</script>
<!-- Load correct image size on window load -->
<script>
$(function(){
if($(window).width() >= 0 && $(window).width() <= 900){
$("img").attr("src","/images/laptop-900.png");
}
else if($(window).width() > 900 && $(window).width() <= 1400){
$("img").attr("src","/images/laptop-1500.png");
}
else{
$("img").attr("src","/images/laptop-2100.png");
}
})
</script>
<!-- Re-load new image size on window resize -->
<script>
$(window).onresize = function(){
if($(window).width() >= 0 && $(window).width() <= 900){
$("img").attr("src","/images/laptop-900.png");
}
else if($(window).width() > 900 && $(window).width() <= 1400){
$("img").attr("src","/images/laptop-1500.png");
}
else{
$("img").attr("src","/images/laptop-2100.png");
}
});
</script>
The relevant HTML is just a tag with a class of "laptop", wrapping around an image tag (which is where I want the image source to dynamically change).
lharby: here was my attempt at your suggestion, couldn't get it to work either:
<script>
var picresize = $(function(){
if($(window).width() >= 0 && $(window).width() <= 900){
$("img").attr("src","/images/laptop-900.png");
}
else if($(window).width() > 900 && $(window).width() <= 1400){
$("img").attr("src","/images/laptop-1500.png");
}
else{
$("img").attr("src","/images/laptop-2100.png");
}
});
$(window).load(function(){
$picresize();
window.onresize = function(event) {
$picresize();
}
});
</script>

So to elaborate on the comments. I made this fiddle:
https://jsfiddle.net/lharby/5p2xdnaf/
There is now a single function called chImage which checks window width and can then be triggered on various events.
I've also stored window width in a variable to make the code a bit cleaner and easier to read (you could also set your sizes in variables, and then change them later if needed, so only write them once).
var chImage = function(){
var winWidth = $(window).width();
if(winWidth >= 0 && winWidth <= 900){
$("img").attr("src","http://placehold.it/350x150");
}
else if(winWidth > 900 && winWidth <= 1400){
$("img").attr("src","http://placehold.it/500x300");
}
else{
$("img").attr("src","http://placehold.it/800x400");
}
};
Then call this function and bind it to whatever events we want.
$(window).on("load resize", function(){
chImage();
});
EDIT
I did move the centering function below to make sure it wasn't intefering with this function, but the centering can be achieved with css. I will try and update.

Chris Coyier has made an utterly interesting article about figuring out responsive images.
The image centering can be done in CSS, no need for scripts. See centering things and solved by flexbox.

Fixed Navigation Menu after Scrolll

I'm trying to create a sticky navigation menu that will be positioned right underneath a banner and when you scroll down and the banner cannot be seen anymore the navigation menu will be fixed at the top of the browser chrome. Here's what I have so far: http://tinyurl.com/bper44a
The CSS is straight forward, the issue may be with my JS:
$(document).ready(function() {
var s = $(".navMenu");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixedTop"); }
else {
s.removeClass("fixedTop");
}
});
});
While it works exactly the way on want it in Firefox, I can figure out why it behaves differently in Chrome and Safari (gets into fixed position as soon as you scroll down just a little bit).
Any insight?

Not sure why it works in firefox, but I think the following will work for all browsers:
$(document).ready(function() {
var s = $(".navMenu");
var banner = $("header > img");
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
// if the scroll position is greater than the height of the banner
// fix the navigation.
if (windowpos >= banner.outerHeight()) {
s.addClass("fixedTop"); }
else {
s.removeClass("fixedTop");
}
});
});
Obligatory fiddle here.

How do I get the sidebar to move up

I have this page and I want the sidebar to slide down with the user and it works well but if you are on a small screen like 1024 * 768 you will not see the bottom. Here is some of the code I used to make the sidebar work. Any suggestions on how I can change this behavior.
$(window).scroll(function(){
sidebar_position();
});
$(window).resize(function(){
sidebar_position();
});
function sidebar_position(){
var w_width = ($(window).width() -1000) /2;
$('#sidebar').css('left', w_width);
var sidebar_height = $('#sidebar').outerHeight();
var content_height = $('#widecolumn').outerHeight();
var w_height = $(window).height();
if ( sidebar_height > w_height) {
$('#sidebar').css('position', 'absolute');
} else {
$('#sidebar').css('position', 'fixed');
};
if (sidebar_height > content_height) {
content_height = sidebar_height;
$('#widecolumn').css('min-height', content_height);
};
if($.browser.msie && $.browser.version == 6 ){
$(window).scroll(function(){
$('#sidebar').css({
top: $(window).scrollTop()
});
})
}
}
I am sort of lost of what to do next....and how to fix this

Hm small screens are a problem either way since the sidebar is almost 600 px high so on netbooks it probably won't fit in the browser window at all.
But you could leave the sidebar on position absolute until the sidebar reaches the top when scrolling and then switch to position fixed so it stays at the top of the screen.
That way it will use the available screen height