How to Add Class on Specific Div When Scroll

jQuery addClass on scroll 'at' a div

You can use following code:

var hieghtThreshold = $(".content").offset().top;

fiddle link: http://jsfiddle.net/sqz75b9g/6/

$(function() {
var header = $('header');
var menu = $('#menu');
var hieghtThreshold = $(".content").offset().top;
var hieghtThreshold_end  = $(".content").offset().top +$(".content").height() ;
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= hieghtThreshold && scroll <=  hieghtThreshold_end ) {
        header.addClass('dark');
        menu.addClass('dark');
    } else {
        header.removeClass('dark');
        menu.removeClass('dark');
    }
  });
})

How to add class if used started scroll inside div?

You were close: http://jsfiddle.net/xj4wbv5c/6/

var header = $(".makescroll");
 $(".makescroll").scroll(function() {
        var scroll = $(this).scrollTop();
        if (scroll >= 10) {
            $(this).addClass("scrolled");
        } else {
            $(this).removeClass("scrolled");
        }
 });

You need to check when the element is scrolled, not the window, so I swapped $(window) with $(this). and also in the add and remove class I swapped with $(this). $(this) in this context means "the element that has fired the event (the div itself)".

How to add a class at specific section on scroll

You want to add class when your DIV having image you want to blur is on the top or on some specific position on your page.

You have to get the dynamic scroll top of your DIV (Having image to be blur). Or you can say Offset in jQuery term.

    var YourDiv = $(".YourDivHavingImageToBeBlur");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        // Here You can add your conditions according to your requirments
        if (scroll == YourDiv.offset().top ) {
            YourDiv.addClass('YourClass');
        } 
    });

How to add a class when reaching a certain element at the top of the page and delete it?

Simply use toggleClass or removeClass:)

jQuery(document).ready(function($){
    $(window).on('scroll', function(){
        if($(window).scrollTop() >= $('#element').offset().top){
            $('.menu').addClass('addclass');
        }
        else 
        {
            $('.menu').toggleClass('addclass');
            //or use $('.menu').removeClass('addclass');
        }
 });
});

Add class to specific element on scroll in vanilla JS

Using getBoundingClientRect().top if element in viewport specific class adding and when out of viewport it'll remove.

window.onscroll = function()  {  var elem = document.getElementsByTagName("div");  for(i=0;i<elem.length;i++){  if(elem[i].getBoundingClientRect().top <= 0){    for(j=0;j<elem.length;j++){      elem[j].classList.remove("addThis")    }    elem[i].classList.add("addThis")  }  }}

body{  margin:0}
*{  box-sizing:border-box}
div {  width:100%;  height: 100vh;  border-bottom:5px solid;  background:grey}
.addThis {    background-color: red;}

<div></div><div></div><div></div><div></div>

Add class to an element when user scrolls to 50px above it?

If I understand correctly, this should do the trick.

$(function(){
    $(document).scroll(function(){
        if($(this).scrollTop() >= $('#content').offset().top - 50) {
            $("#content").css("background","red");
        } else {
            $("#content").css("background","orange");
        }
    });
});

Basically, it check the current position of the user's scroll and compare it to the position of the div minus 50 pixel.

If you just past this code in your document, it should work properly.

Change div color when scrolling to a specific div class

If I Understand your question , The first condition check the would be offsettop - height of your div , and the second there where an error in condition (condition iversion) ,

also adding the transition to you .background-overlay instead of .black will have effect in both scroll up down

$(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var $divBlack = $('.background-overlay');
    
    if (scroll >= $divBlack.offset().top - $divBlack.height()) { // check the offset top
      $divBlack.addClass("black");

    } else if (scroll <= $divBlack.offset().top + $divBlack.height()) { // check the scrollHeight
      $divBlack.removeClass("black");
    }
  });
});

.full-height,
.page {
  height: 500px;
  border-bottom: 1px solid black;
}

.black {
  background: #000000;
}

.background-overlay {
  transition: background-color 2s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">


</div>

<section class="full-height background-overlay">

</section>
<div class="page">



</div>