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

jQuery conditional header class swap

Hope someone can help me out since I don't really know js and would like to build upon an existing function on a WP site...
I have two versions of a site header. On the homepage the alt (transparent background) version loads, and after scrolling, it swaps to the sitewide non-alt (white bg) version.
I would like to add a condition where the header also swaps to the non-alt version when the the menu button is "toggled" (class="main-navigation toggled").
Here's the existing function. Thanks is advance.
jQuery(document).ready(function ($) {
console.log('ready');
var header = $(".site-header");
if( $("body.home").length ) {
header.addClass("site-header-alt");
}
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if( $("body.home").length ) {
if (scroll <= 100) {
header.addClass("site-header-alt");
} else {
header.removeClass("site-header-alt");
}
}
});
});

Just simply put:
$(document).ready(function () {
// check if .main-navigation contains toggled class
if ( $(".main-navigation").hasClass("toggled") )
{
header.addClass("site-header-alt");
}
// Also listen to the click event of the element that does the toggling.
$(".menu-toggle").click( function () {
if ( $(".main-navigation").hasClass("toggled") )
{
header.addClass("site-header-alt");
}
});
// other stuffs
});
hope that helps

jQuery -- Prevent User from Scrolling Up Past Certain Scroll Height

I am making a one-page website.
Basically, I have this animated landing page with a landing image and a bootstrap jumbotron. I want to be able to implement a function where once the user scrolls past the end of the jumbotron, the user cannot scroll back up to view the landing image and the jumbotron. In a sense, either hide or delete the <div>s that were at the top, or completely disable scrolling back to those points.
I found this code, but it automatically disables scrolling up to the page top (after 200 px) on page load:
$(function() {
var scrollPoint = 200;
$(window).scroll(function() {
$(window).scrollTop() < scrollPoint ?
$(window).scrollTop(scrollPoint) : '';
}).scroll();
});
Any ideas?

You can use this code to hide the jumbotron.
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('#id_of_jumbotron').offset().top +
$('#id_of_jumbotron').outerHeight() - window.innerHeight) {
hideTheJumboTron();
}
});

try this:
$(function () {
var scrollPoint = 200;
$(window).scroll(function () {
if ($(window).scrollTop() < scrollPoint) {
console.log($(window).scrollTop());
$(window).scrollTop(scrollPoint)
return false;
}
}).scroll();
});

.JS Fade in navbar after scrolling past element

Hi I am fairly new to javascript and I am simply trying to fade in the navbar after it reaches a specific element/class instead of using the distance from the top of the window.
// Navigation bar - show on scroll
$(document).ready(function(){
// hide .navbar first
$(".navbar").hide();
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 200) {
$('.navbar').fadeIn();
} else {
$('.navbar').fadeOut();
}
});
});
});

You can use .offset() to get an elements position relative to the document.
so (outside of your window.scroll function do something like.
var offset = $('.myTriggerClass').offset().top;
then change your condition to
if ($(this).scrollTop() > offset)
so you would end up with
$(".navbar").hide();
// set distance user needs to scroll before we fadeIn navbar
var offset = $('.myTriggerClass').offset().top;
// fade in .navbar
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > offset) {
$('.navbar').fadeIn();
} else {
$('.navbar').fadeOut();
}
});
});

jQuery: Hide element after scrollTop value is passed

I want to hide a div once my slider passes a scrollTop() value of 200px. I've looked at this article and tried using it as a template for what I want. I have the following code, but its not hiding the element. Live site
function removeArrow() {
$(window).scroll(function() {
if($('.portfolio-sliders:first-child').scrollTop() > 100) { //use `this`, not `document`
$('.scrl-dwn').css({
'display': 'none'
});
}
});
}
UPDATE
I've updated by code:
function removeArrow() {
$(window).scroll(function() {
var slider = $('.portfolio-sliders:first-child').position.top;
if(slider >= 10) {
$('.scrl-dwn').hide();
}
});
}
which should work, but its not...

Position is a function, not a property. You need to call the function with ():
var slider = $('.portfolio-sliders:first-child').position().top;

Replace your whole removeArrow function with this code.
(If you open your live site, and run this in the console, you can see it's working).
The scroll event never fired, so I handled theese mousewheel events instead.
$(window).bind('DOMMouseScroll mousewheel', function() {
var div = $(".portfolio-sliders:first-child"),
top = div.position().top,
display = top < 400 ? 'none' : '';
$('.scrl-dwn').css({ 'display': display });
});

Use This :
$(window).scroll(function(){
if ($(window).scrollTop() > 660)
{
$(".Left-Section").css("position", "fixed");
$(".Center-Content").css("margin-top", "0");
$(".Right-Nav img").css("transform", "rotate(360deg)");
}
;)