Develop Reference

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 and remove class using javascript on scroll

I need to add class via javascript on scroll. My issue is I need to add and remove class on reaching a particular section id
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader1").removeClass("video-background");
$(".clearHeader11").addclass("video-foreground");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="id1" class="clearHeader1 video-background"></section>
<section id="id2" class="clearHeader1"></section>

Try this one
if($(window).scrollTop() >= $('#id1').offset().top + $('#id1').outerHeight() - window.innerHeight) {
$("#id1").removeClass("active");
console.log("removeClass");
}else{
console.log("addClass");
$("#id1").addClass("active");
}

Try this
$(window).scroll(function() {
var scroll = $(this).scrollTop();
var section1Height = $('#id1').offset().top + $('#id1').outerHeight() - window.innerHeight;
if (scroll >= section1Height ) {
$(".clearHeader1").removeClass("video-background");
$(".clearHeader11").addclass("video-foreground");
}
}

How to apply .on('load'), .scroll(), and .resize() to a sticky scroller

I have a functionality that sets the top position of a div (#sticky) on load and on scroll. But of course the variables will change as the size of the page changes, so I have need for the .resize() event.
When I run the code on page load and on scroll, it works fine but if I resize the page, then scroll the top position of #sticky gets set to 0.
How do I correct this problem?
$(document).ready(function(){
sticky = $('#sticky'),
stickyPadding = 80;
if($(sticky).length && ($(window).width() >= 900)){
$(sticky).css('position','relative');
$(window).on('load',function(){
getStickyMeasurements();
stickEl()();
$(window).resize(function(){
getStickyMeasurements();
});
$(window).scroll(stickEl());
});
}
});
function getStickyMeasurements(){
elHeight = $(sticky).outerHeight();
initialElToTop = $(sticky).offset().top;
dynamicStickyLimiter = $('.entry-content-extra').length ? $('.entry-content-extra').offset().top : $('footer').offset().top
stickyLimit = dynamicStickyLimiter - initialElToTop;
}
function stickEl(){
return function(){
elTopModifier = $(window).scrollTop() - initialElToTop;
if( stickyLimit <= (elTopModifier + elHeight + stickyPadding)){
stickyTopResult = stickyLimit - elHeight;
}else if($(window).scrollTop() + stickyPadding >= initialElToTop){
stickyTopResult = elTopModifier + stickyPadding;
}else{
stickyTopResult = 0;
}
$(sticky).css('top', stickyTopResult + 'px');
}
}
Also, I know the scope of my variables needs work, so if you include that in part of your answer, that would be helpful as well (but not required of an accepted answer).

Only execute JS if the screen size is more than 1024px?

I have a sidebar that becomes position:fixed when the bottom of the div is visible (followed this tutorial). My problem is I only need the JS to work if the screen size is more than or equal to 1025px.
I know I need something along the lines of if($(window).width() > 1025), but I can't figure out where that needs to be. I'm not great with JS so any help would be appreciated.
Demo
JS
$(function () {
if ($('.leftsidebar').offset()!=null) {
var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0));
var height = $('.leftsidebar').height();
var winHeight = $(window).height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 100;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',winHeight-height-gap +'px');
}
else if (y+winHeight>footerTop) {
// if so, add the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',footerTop-height-y-gap+'px');
}
else
{
// otherwise remove it
$('.leftsidebar').removeClass('leftsidebarfixed').css('top','315px');
}
});
}
}

This should work:
var flag = false;
// This will keep on checking for window size while you are scrolling.
$(window).on("scroll", function() {
if (flag){
// Do whatever you want here
alert("hey");
}
});
$(window).on("resize", function() {
if ($(window).width() >= 1025){
flag = true;
} else {
flag = false;
}
})

From my comment: Just put that if($(window).width() > 1025) inside the function provided to the scroll event.
e.g.
$(window).scroll(function (event) {
if ($(window).width() > 1024) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y + winHeight >= top + height + gap && y + winHeight <= footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', winHeight - height - gap + 'px');
} else if (y + winHeight > footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', footerTop - height - y - gap + 'px');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/3w5dt/31/
Notes:
not that 1 PX matters, but you did say > 1024px, hence changing 1025 to 1024 :)

First of all you should have a look at the jQuery documentation. The $.browser function was removed in jQuery 1.9. This can end up in serious problems in your code.
Just add something like the follwing code in the first if condition:
if (!msie6 && $('.leftsidebar').offset()!=null && $(window).width() > 1025 ) {
...
}
That should be all. If you want, that javascript should react on window resize just add something like the following
$(window).on('resize', function( event ) { /* code here */ }).trigger('resize');

if(screen.width >= 1024)
{
$(window).scroll(function (event) {
//Write your function code here
});
}
I hope it will help you.

if element exist on document then add an addittional value into method

I really need some help with this, I dont know javascript well at all to be honest, a friend of mine put some of this together a few months ago ive just added $contentContainer and added these variables but I just need one more thing added to if for it to suite my needs...
<script type="text/javascript">
// DOM Container Resize Handler
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','1210px');
} else if ((width < 1454) & (width >= 1212)) {
container.css('width','1212px');
contentContainer.css('width','968px');
} else {
container.css('width','970px');
contentContainer.css('width','726px');
}
};
$(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>
I need to modify this script to search through the document and IF document DOES NOT contain ('body .asideContent') to add 252px to the object contentContainer.css method
Don't worry about the fileerWrap function this works fine :)
I really appreciate the help

Should be something like this :)
if($("body.asideContent").length === 0){
var width = contentContainer.css('width');
contentContainer.css('width',width + 252 + "px");
}