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>
Related Topics
Regular Expression for Not Allowing Spaces in the Input Field
How to Close Toggle Menu When Clicking Navigation Item Anchor Link
How to Save .Xlsx Data to File as a Blob
Filter/Search from the Drop-Down List of Options Using Angular
Expected to Return a Value At the End of Arrow Function Array-Callback-Return on Filter Function
How to Hide Div When You Scroll to Bottom and Show It Again When Scroll Up to Top
It Is Possible to Call Class Function from Outside Class
How to Clear Input After Onclick With Reactjs
How to Disable Clicking Inside Div
Check If Page Gets Reloaded or Refreshed in JavaScript
Using JavaScript to Detect Whether the Url Exists Before Display in Iframe
Show Base64 Pdf Data Using Window.Open on Chrome New Version
How to Add Node Module to Angular Project If Is Not Schematics Enabled
How to Download Pdf Automatically Using Js
What's the Best Way to Reload/Refresh an Iframe