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;
}
});
Related
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");
}
});
I need to load 2 different animated graphic on window scroll up/down on a website by triggering some functions, it's working but its buggy as the functions are triggered too many times when scrolling:
$(window).scroll(function() {
var scroll = $(window).scrollTop(),
headerHeight = $('.navbar').outerHeight();
if(scroll > headerHeight) {
loadLogoAnimeDown();
}else{
loadLogoAnimeUp();
}
});
You need a way to check if the functions have been called (and logo has been loaded), so you can use a variable for that. After the logo has been loaded, you set the variable as false, which prevents them from loading more than once.
var downNotLoaded = true;
var upNotLoaded = true;
$(window).scroll(function() {
var scroll = $(window).scrollTop(),
headerHeight = $('.navbar').outerHeight();
if(scroll > headerHeight) {
if(downNotLoaded){
loadLogoAnimeDown();
downNotLoaded = false;
}
}else{
if(upNotLoaded){
loadLogoAnimeUp();
upNotLoaded = false;
}
}
});
I think you might find this is a very hacky way to do it, but this should work.
var animated;
$(window).scroll(function() {
var scroll = $(window).scrollTop(),
headerHeight = $('.navbar').outerHeight();
if(scroll > headerHeight) {
if (animated == true) {
loadLogoAnimeDown();
animated = false;
}
} else{
if (animated == false) {
loadLogoAnimeUp();
animated = true;
}
}
});
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
Added this code to my sticky element using position:sticky
var $sticky = $('.grid-container .sticky'),
$stickyTo = $('.grid-container .stickyTo'),
stickyToTop = $stickyTo.offset().top,
stickyToBottom = stickyToTop + $stickyTo.outerHeight();
$(window).on('scroll', function() {
var scroll = $(window).scrollTop(),
stickyTop = $sticky.offset().top,
stickyBottom = $sticky.offset().top + $sticky.outerHeight();
if (stickyBottom >= stickyToBottom) {
if (scroll < stickyTop) {
//$sticky.addClass('fixed').removeClass('abs');
} else {
//$sticky.addClass('abs');
}
} else if (scroll > stickyToTop) {
$sticky.addClass('stuck');
} else if (scroll < stickyToTop) {
$sticky.removeClass('stuck');
}
});
and I have two sticky elements see image attached but when I scroll to the first section it adds a class "stuck" on the second section, how can I make that only on that section jquery is triggered and not affect the second/other section unless scrolled on
Here is My FIDDLE
Because $sticky in your case is a jQuery collection with two elements in it you have to use .each() loop to check each element separately. Then you probably don't need $stickyTo, because you have to check for each 'sticky' element's own .parent(). Something like this:
var $sticky = $('.grid-container .sticky'),
$(window).on('scroll', function() {
var scroll = $(window).scrollTop()
$sticky.each(function(){
const $this = $(this)
const stickyTop = $this.offset().top,
const stickyBottom = stickyTop + $sticky.outerHeight();
const $stickyTo = $this.parent()
const stickyToTop = $stickyTo.offset().top,
const stickyToBottom = stickyToTop + $stickyTo.outerHeight();
if (stickyBottom >= stickyToBottom) {
if (scroll < stickyTop) {
//$sticky.addClass('fixed').removeClass('abs');
} else {
//$sticky.addClass('abs');
}
} else if (scroll > stickyToTop) {
$sticky.addClass('stuck');
} else if (scroll < stickyToTop) {
$sticky.removeClass('stuck');
}
})
});
Please note though, this function is not really optimized. It would be better to use native javascript during the scroll. Or even better check native CSS position: sticky.
I have a survey page divided into sections. As the user scrolls, each section's header sticks to the top of the screen until the next section is reached. I was able to do it for the first and second section but I am not sure how to do it for the third one. There must be a better way to do this.
Here is my code and a jsfiddle
Thank you
var s = $("#block2 .question-title-block");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if ($(this).scrollTop() > 404) {
$('#block1 .question-title-block').addClass("sticky");
if (windowpos >= pos.top) {
$('#block2 .question-title-block').addClass("sticky");
$('#block1 .question-title-block').removeClass("sticky");
}
else{
$('#block2 .question-title-block').removeClass("sticky");
}
}
else{
$('#block1 .question-title-block').removeClass("sticky");
$('#block2 .question-title-block').removeClass("sticky");
}
})
If you want it to be applied to as many elements as you want, don't use them individually, use their class. Here is what you can do:
var titleBlocks = $(".question-title-block");
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
titleBlocks.each(function(){
$(this).toggleClass('sticky', $(this).parent().offset().top <= windowpos);
});
});
JS Fiddle Demo
try this (allows for any number of question blocks):
var containers = $('.question-block-container');
$(window).scroll(function () {
var windowpos = $(window).scrollTop();
containers.each(function () {
var container = $(this),
title = container.find('.question-title'),
contOffsetTop = container.offset().top,
conOffsetBottom = contOffsetTop + container.outerHeight() + 60; // 60 is margin bottom
if (windowpos >= contOffsetTop && windowpos <= conOffsetBottom) {
if (!title.hasClass("sticky")) {
title.addClass("sticky");
}
} else if (title.hasClass("sticky")) {
title.removeClass("sticky");
}
});
});
Example