We Keep Coding

Onscroll toggle failing to add or remove class

I am fairly new to js but I am trying to get this to fire so that my nav div will stick to the top of the screen I am not sure if my window on the scroll function is firing correctly.
$(document).ready(function() {
"use strict";
$('#commons').window.onscroll(function(direction) {
$('.main-nav').toggleClass('fixed-nav', direction == 'down');
$('.main-nav a').removeClass('active');
$('.main-nav a.commons-btn').addClass('active');
}, {
offset: '90px'
});
});

$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
// Type here your script, this will run on scrolling
} else {
// This script will run when the scroll bar is on the top
}
});
});

Hotdog menu closes when I scroll on mobile. Need it to stay open

this is the javascript. I think it has to do with the window resizing. the menu collapses when I try and scroll to more items in the menu on mobile. Any help would be greatly appreciated.
jQuery(document).ready(function($){
$(window).scroll(function(){
var windowWidth = $(window).width();
if(windowWidth > 768 ){
if($(window).scrollTop() > 65){
$('.sm-logo').slideDown();
}else{
$('.sm-logo').slideUp();
}
}else{
$('.sm-logo').slideUp();
}
});
$(window).on('resize',function(){
var windowWidth = $(window).width();
console.log(windowWidth);
if(windowWidth < 768 ){
$('nav ul').slideUp();
$('.hamburger').removeClass('open').addClass('closed');
}else{
$('.hamburger').removeClass('closed').addClass('open');
$('nav ul').slideDown();
}
});
$(document).on('click','.hamburger', function(){
$(this).toggleClass('open closed');
$('nav ul').slideToggle();
});
});

It's hard to tell exactly what's going on without a working example, plus I'm on my mobile device, but inside your on resize function, it says to slide up the nav if the screen is less than 768 px.
That slide up method should not be there.
$('nav ul').slideUp();
Perhaps you actually have the slide up and slide down methods reversed, try swapping them.

wrap code in a function. noob here

I'm trying to wrap this code:
if($(window).width() > 980) {
$(window).on("scroll", function() {
if($(window).scrollTop() > 20) {
//add black background
$(".x-navbar").addClass("active");
$(".x-navbar .desktop .x-nav li a").addClass("small-bar");
}
else {
//remove background
$(".x-navbar").removeClass("active");
$(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
}
});
}
in a function, so that I can disable it under 980px width.
The thing I'm trying to achive is something like this:
create a function as here under:
navBar = function () {
// the whole code goes here.
}
and then "disable" it in the mobile under 980px width like this:
if($(window).width() < 980) {
// DON'T run the funcion called "navBar".
}
The problem I'm having is that if the window gets resized to a width under 980px the code above will not listen to the resize and it will run anyway.

as I mentioned in comment
$(window).on("scroll resize", function() {
if($(window).width() > 980) {
if($(window).scrollTop() > 20) {
//add black background
$(".x-navbar").addClass("active");
$(".x-navbar .desktop .x-nav li a").addClass("small-bar");
}
else {
//remove background
$(".x-navbar").removeClass("active");
$(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
}
}else{
// if window width < 980
//remove background
$(".x-navbar").removeClass("active");
$(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
}
});

You can register a function that will be called when window.resize method is triggered.
$(window).resize(function () {
//Here you can check the width
});
Hope this helps.

This is because once you instantiate a listener, it will not be removed until you explicitly remove it. Check out jQuery's off function to remove a listener. You can then switch between off() and on() depending on the window size.

responsive jquery nav interaction - issue on resize

Requirement:
Horizontal nav in 900px or above and vertical in 900 below. but in 900 or below, the nav should hide by default and appear only when clicked on the "header"
What I have so far:
http://jsfiddle.net/0rmgpjtr/3/
$(document).ready(function(){
$('.dropdown ul:first').show();
$('.dropdown ul:first').css("display:table");
$('.dropdown li').click(function (e) {
$(this).addClass('active').siblings('li').removeClass('active');
$(this).children('ul').slideToggle('fast');
$(this).siblings('li').find('ul').slideUp('fast');
e.preventDefault();
e.stopPropagation();
});
$(document).on('click', function (event) {
$('.dropdown li').children('ul').slideUp('fast');
});
});
$(window).on("resize", function () {
if($(window).width()<=900){
console.log("800");
$('.ch-logo').bind('click',function(){
$('.dropdown').slideToggle('fast');
})
}else{
console.log("900+");
$('.ch-logo').unbind()
}
}).resize();
Issue:
1. binding and unbinding the header click event is not working
2. when i click on parent link to open subnav, it is flickering after i resize the browser - actually any interaction, starts flickering the menu, may be because its tied to resize function.

http://jsfiddle.net/extca38f/
$(window).on("resize", function () {
if($(window).width()<=900){
console.log("800");
$('.dropdown').hide();
$('.ch-logo').bind('click',function(){
$('.dropdown').toggle();
});
}else{
$('.dropdown').show();
}
}).resize();

Use toggle instead of slidetoggle Demo Here
$(window).on("resize", function () {
if($(window).width()<=900){
console.log("800");
$('.dropdown').hide();
$('.ch-logo').bind('click',function(){
$('.dropdown').toggle('slow');
});
}else{
$('.dropdown').show();
}
}).resize();
Check the differnce between toggle and slidetoggle

Detect window width on the fly in jQuery

I am using a template and it come with a jQuery function to detect the window width, but it only works if you open the window up or refresh the page, not when you adjust the window width.. From what IU have read I need to integrate the resize function into my codebase
$(window).resize(function()
but as my jQuery is limited I'm not sure how to put it in this script
var ww = $(window).width();
/* Menu */
$(document).ready(function() {
"use strict";
$('body').find("#mainmenu li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
}
});
$('body').find(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$('body').find("#mainmenu").toggle();
});
adjustMenu();
});
$(window).load(function () {
$('body').find("#mainmenu").css('pointer-events', 'auto');
});
var adjustMenu = function() {
"use strict";
if (ww < 900) {
$('body').find(".toggleMenu").css("display", "inline-block");
if (!$('body').find(".toggleMenu").hasClass("active")) {
$('body').find("#mainmenu").hide();
} else {
$('body').find("#mainmenu").show();
}
$('body').find("#mainmenu li").unbind('mouseenter mouseleave');
$('body').find("#mainmenu li a.parent").unbind('click').bind('click', function(e) {
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 900) {
$('body').find(".toggleMenu").css("display", "none");
$('body').find("#mainmenu").show();
$('body').find("#mainmenu li").removeClass("hover");
$('body').find("#mainmenu li a").unbind('click');
$('body').find("#mainmenu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
$(this).toggleClass('activelink');
$(this).find("ul").toggleClass('animatedfast');
$(this).find("ul").toggleClass('fadeInUp');
});
$('body').find("#mainmenu ul li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
$(this).find("ul li").toggleClass('animatedfast');
$(this).find("ul li").toggleClass('fadeInLeft');
});
}
};
I can see that the logic is taking place in the adjustMenu function, so would I wrap that in the resize function?

Maybe I'm missing something obvious, but why not pull the whole thing out of
$(document).ready ()
Place it in a function
Function doAllOfThis (
//do everything
);
And then call it on document ready?
$(document).ready(function ({
doAllOfThis();
});
$(widow).resize (function ({
doAllOfThis();
});
I don't see anything that would be an issue. But you could just extract the code with "if ww =" conditions and move that to a function, then do as above with the function.
BETTER SOLUTION
Just noticed the
adjustMenu();
Function is already set for you, so add
$(window).resize(function({
var ww = $(window).width();
adjustMenu();
});

Utilize the resize event.
$(window).resize(function() {
var ww = $(window).width(); // will contain width after resize
// your adjust logic here
});