I'm having trouble with jQuery and JS in general. How do I add a class to a child element on vertical scroll in order to animate it?
Ex:
<div class="wrapper">
<p> Lorem ipsum </p>
</div>
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll <= 770) {
$('.wrapper p').addClass('animate fadeInDownBig');
}
});
I just wanna addClass to the paragraph. Not the wrapper.
As per your recent edit:
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll <= 770) {
$('.wrapper').find("p").addClass('animate fadeInDownBig');
}
});
DEMO
Related
Here is a small demo:
HTML
<body>
<div class="container-empty"></div>
<ul>
<div id="divfix"><li id="lifix">Text 1 FIXED</li></div>
<div id="divfix2"><li id="lifix2">Text 2 FIXED</li></div>
<div id="divfix3"><li id="lifix3">Text 3 FIXED</li></div>
</ul>
<div class="container-footer"></div>
</body>
JSCRIPT
var toppag=$("#lifix,#lifix2,#lifix3");
var pag=$("#divfix,#divfix2,#divfix3");
toppag.css({position:"relative"});
$(window).scroll(function () {
var scroll=$(this).scrollTop();
pag.each(function(i,n){
if(scroll < $(this).offset().top) {
toppag.eq(i).css({'position':'relative'});
}
if(scroll > ($(this).offset().top + toppag.eq(i).height())) {
toppag.eq(i).css({'position':'fixed',"top":"0"});
}
});
});
DEMO HERE: https://jsfiddle.net/Kigris/4cb0ygun/2/
I want to hide "Text 1 FIXED" when reaches "Text 2 FIXED" and so on. Also, when all reach the footer hide them all.
Try adding
var footer = $(".container-footer");
pag.css('position', 'relative'); under toppage.css etc
and
if(scroll > footer.offset().top){
toppag.hide();
}else{ toppag.show();}
and
toppag.eq(i-1).parent().css({'z-index':"0"});
in your second if(scroll)
What this does is makes sure the fixed element gets pushed to the bottom in stacking order.
DEMO: Demo
css
.stick{position: fixed !important;}
sticker div with id="summary-div"
<div class="col-sm-8"><!-- this Div has 4 accordions div--></div>
<div class="col-sm-4">
<div>
<div>
<div>
<div id="order_summary">
<div id="summary-div"></div>
</div>
</div>
</div>
</div>
</div>
footer
<div class="container-fluid" id="stickEndPlace"></div>
The below jquery code is making it stick and unstick but the stickermax which is calculated dynamically to determine the css property top to stick it or unstick right above footer. BUT, the problem is; I have to give some static values for some of the scenarios for the "stickermax" variable to be pretty fit above footer otherwise, it is coming sometimes little below or little above the footer having id of "stickEndPlace". Please, help. Thanks
var s = $("#summary-div");
var pos = s.position();
var stickermax = $(window).outerHeight() - $("#stickEndPlace").outerHeight() - s.outerHeight();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top && windowpos < stickermax) {
$("#summary-div").addClass("stick"); //stick it
$("#summary-div").css("top",""); //kill top css property which sets while unsticking
} else if (windowpos >= stickermax) {
$("#summary-div").removeClass("stick"); //un-stick
$("#summary-div").css({top: stickermax + "px"}); //set sticker right above the footer
} else {
$("#summary-div").removeClass("stick"); //top of page
}
});
problem
The actual problem coming is from this line of code.
var stickermax = $(window).outerHeight() - $("#stickEndPlace").outerHeight() - s.outerHeight();
This "stickermax" value is not coming correctly so the Scroll Div sometimes go below inside footer and sometimes stops above footer.
How to fix that "stickermax" because it is the dynamic "top" css property which is making the sticker DIV positioning.
Is there an easy way to highlight a top with id (apply css-class with specific color f.e.) after user scrolls to it? I have a scrollspy on page, but it seems that plugin will not help me, so I can't make to ends meet.
P.S. I didn't find alike info in Google or StackOverflow, so please, don't get me wrong.
There is a rough example of page
https://jsfiddle.net/masyurik/kdnzdeb2/#&togetherjs=DeaMiBADpp
HTML
<div id="secA" class="section">
Hello it's secA
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div id="secB" class="section">
Hello it's secB
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div id="secC" class="section">
Hello it's secC
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
CSS
.section {
background-color: red;
}
.active {
background-color: yellow;
}
You need to use scrollevent and change the class accordingly... kindly check https://jsfiddle.net/77v3329y/1/
jQuery
$(document).ready(function() {
var a = +$('#secA').height();
var b = $('#secB').height();
var c = $('#secC').height();
console.log(a);
console.log(b);
console.log(c);
$(window).on('scroll', function() {
$('#secA, #secB, #secC').removeClass('active');
var st = $(document).scrollTop();
if (st < a) {
$('#secA').addClass('active');
}
if (st > a) {
$('#secB').addClass('active');
}
if (st > a + b) {
$('#secC').addClass('active');
}
})
});
You can use jquery-waypoints to know which element has reached at top of the viewport. The plugin will give you the callback which will help you to change the css of the active element.
Here is the solutions to detect the scroll to top event.
Fire event when div is visible to visitor with jQuery?
Simply use jQuery to change the css of the element when scroll to top: $("#secA").css("background-color", "yellow");
I placed logo in sticky navigation bar. It should be visible only if scroll some 100px.
I tried using reference Show div after scrolling 100px from the top of the page but its not working for me.
Can any one please help.
Here is the code
<div id="toplogo"><img src="images/logo.png" /></div>
<script>
var navlogo = $("toplogo");
$(window).scroll(function(){
if($(window).scrollTop() >= 100 ){
navlogo.show();
} else {
navlogo.hide();
}
});
</script>
Your jquery selection is wrong.
var navlogo = $("toplogo");
should be
var navlogo = $("#toplogo");
I use this code to add a class on scroll. The active class works great, but the location on the page when the class is placed is not correct. We use a main header on our website with position fixed and when this header becomes sticky it is placed below our main header also fixed. The active class needs to be placed earlier on the page when scroll, because the content of the section already started, when the class is placed.
And for some reason the code conflicts with another script on the same page, how can I fix that problem? That both scripts with beside each other.
Fiddle: http://jsfiddle.net/0knrcv3z/1/
HTML:
<div style="height:57px;">
<div class="menu-header-product">
<div class="product-anchor-links-wrapper">
<nav class="product-page-nav">
<ul class="menu-header-top-product">
<li class="menu-item-header-product">Productbeschrijving</li>
<li class="menu-item-header-product">Specificaties</li>
<li class="menu-item-header-product">Reviews</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="content">
<section id="description">
<div class="box-description"></div>
</section>
<section id="additional">
<div class="box-additional"></div>
</section>
<section id="reviews">
<div class="box-reviews"></div>
</section>
</div>
What do I need to change in this code?
<script>
$(window).scroll(function(){
var sticky = $('.menu-header-product'),
scroll = $(window).scrollTop();
if (scroll >= 645) sticky.addClass('sticky');
else sticky.removeClass('sticky');
});
$(window).scroll(function(){
var sticky = $('.content'),
scroll = $(window).scrollTop();
if (scroll >= 645) sticky.addClass('sticky');
else sticky.removeClass('sticky');
});
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-130 /**just subtract the height of the fixed html part */
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('nav a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('nav ul li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}
</script>
if (scroll >= 50) sticky.addClass('sticky'); else
sticky.removeClass('sticky'); }); $(window).scroll(function(){ var
sticky = $('.content'),
scroll = $(window).scrollTop();
if (scroll >= 12) sticky.addClass('sticky'); else
sticky.removeClass('sticky'); });
adds the sticke header when scrolling over "50" and removes it wenn scrolling under 12. just edit those numbers as long as it would be good for you ;)