Develop Reference

How to add a class to an html element when a web page has been scrolled several px

I want to add a class to $ ('# header') when my web page scrolls down by 100px
this is the code :
$(window).scroll(function(){
var offset = $(window).offset();
if (offset.top > 100) {
$('#header').addClass('header2')
}
else {
$('#header').removeClass('header2')
};
});
#JQueryCode

Please use below mention code
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//console.log(scroll);
if (scroll >= 50) {
//console.log('a');
$("#header").addClass("header2");
} else {
//console.log('a');
$("#header").removeClass("header2");
}
});

How to add Position Fixed on specific Div and then remove that class on scroll

Here is the Jsfiddle i am working on
https://jsfiddle.net/farooqshad/jbdczk10/10/
Basically i want to add a class on scroll to specific div and then remove that class .
Here is my javascript
var YourDiv = $(".mainwrapper");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
console.log(scroll);
if (scroll >= YourDiv.offset().top - 10) {
YourDiv.addClass('fixed');
console.log("fixed");
} else {
YourDiv.removeClass('fixed');
console.log("Not Fixed");
}
});

farooq try this solution
var YourDiv = $(".mainwrapper");
var foo=$(".footer1")
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= YourDiv.offset().top - 10 && scroll<=foo.offset().top - 10) {
YourDiv.addClass('fixed');
}
else
{
YourDiv.removeClass('fixed');
}
});
and let me know if don't works
this is fiddle

JQuery fadeIn() when element comes into viewport

I would like to fadeIn() different elements as soon as they come into viewport view, when scrolling down a page.
My code however fades in all DIVs (that have the ".fadethis" class) at once, instead of only when that specific element comes into view:
$(window).scroll(function() {
$(".fadethis").each(function() {
var top_of_element = $(this).offset().top;
var bottom_of_element = $(this).offset().top + $(this).outerHeight();
var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
var top_of_screen = $(window).scrollTop();
if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$(this).fadeIn(10000);
}
});
});
CSS
.fadethis{
display:none;
}

Import jQuery, animate.less and waypoint
Javascript:
$(document).ready(function(){
$('.fromLeft').waypoint(function()
{
$(this.element).css('opacity',1);
$(this.element).addClass("bounceInLeft");
},
{offset:'100%'});
$('.fromRight').waypoint(function()
{
$(this.element).css('opacity',1);
$(this.element).addClass("bounceInRight");
},{offset:'100%'});
$('.appear').waypoint(function()
{
$(this.element).css('opacity',1);
$(this.element).addClass("fadeIn");
},{offset:'100%'});
});
And HTML
<div class="animated onView fromLeft">
appears from left
</div>
Here you can see an example I made

Add class to element upon scroll

I'd like to add a class to an element when a user first scrolls away from the top of the page. If the user then scrolls back up and hits the top of the page I'd like that class removed.
Use of jQuery in the solution is fine.

try
$(window).scroll(function() {
$("id or class").removeClass("active");
var scroll = $(window).scrollTop();
if (scroll <= 500) {
$("#one").addClass("active");
}
else if (scroll <= 1000) {
$("#tow").addClass("active");
}
else {
$("#three").addClass("active");
}
}

So here is the solution you're looking for. Just customize it with your div tags.
$(document).ready(function () {
$(window).scroll(function(){
// get the height of #wrap
var h = $('#top').height();
var y = $(window).scrollTop();
if( y > (h*.25) ){
$("#sidef").fadeIn(1100);
} else {
$('#sidef').fadeOut(75);
}
});
});

var notAdded = true;
$(window).scroll(function(){
if( $(this).scrollTop() == 0){
$(elem).removeClass('classname');
notAdded = true;
}
else if(notAdded){
$(elem).addClass('classname');
notAdded = false;
}
});

javascript check document for element to apply a value

i'm pretty new to javascript and have been stuck on this all day. I have a script which resize element according to screen res it all works except I need to have "if element DOES NOT exist on document then add an addittional value "242px" into contentContainer.css method" this is what I have so far so that this eleemnt takes up the space of the asideContent element when its not on the page...
<script>
// DOM Container Resize Handler
var extra = ($("body.asideContent").length == 0) ? 242 : 0;
var adjustStyle = function() {
var winWidth = $(window).width(),
width = parseInt(winWidth),
container = $('body .fixed');
contentContainer = $('body .content');
if (width >= 1454) {
container.css('width','1454px');
contentContainer.css('width',extra + 1210 + "px");
} else if ((width < 1454) & (width >= 1212)) {
container.css('width','1212px');
contentContainer.css('width',extra + 968 + "px");
} else {
container.css('width','970px');
contentContainer.css('width',extra + 726 + "px");
}
};
$(function() {
var filterWrap = $("#filterWrap"),
offset = filterWrap.offset(),
topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
filterWrap.stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
filterWrap.stop().animate({
marginTop: 0
});
};
});
// DOM Container Resize Handler - Initialization
$(window).resize(function() {
adjustStyle();
});
adjustStyle();
});
</script>
Its applying the extra all the time, add I only want to apply this when ("body.asideContent") is not in the document
test html
<html>
<head>
</head>
<body>
<div class="fixed">
<div id="container">
<div class="asideContent">&nbsp</div>
<div class="content">&nbsp</div>
</div>
</div>
</body>
</html>
Just want to say thank you in advance for any help you can give me... its been driving me crazy all day...

body.asideContent means a body with a class of asideContent. Try
$("body .asideContent")
(aka, with a space between body and .asideContent)