I use a scrollTop function to start animations, delays, etc when the div is scrolled to. It works for other things on my page, but for some reason, this function is not working and it loads on page load.
Does anyone see anything wrong in my code? This can be seen live here:
<div class="blue-box-container">
</div>
$(function() {
var oTop = $('.blue-box-container').offset().top - window.innerHeight;
$(window).scroll(function() {
var pTop = $('body').scrollTop();
console.log(pTop + ' - ' + oTop);
if (pTop > oTop) {
blueBoxDelays();
}
});
});
$('.fadeBlock').css('display', 'none');
blueBoxDelays();
function blueBoxDelays() {
var delay = 0;
$('.fadeBlock').each(function(i) {
$(this).delay(400 + delay).fadeIn(1000);
delay = 200 * (i + 1);
});
};
I extracted your code to a fiddle and it works correctly https://jsfiddle.net/26jw7Low/3/, you just need to remove the call to blueBoxDelays() which is outside of the initial function as seen below.
$(function() {
var oTop = $('.blue-box-container').offset().top - window.innerHeight;
$(window).scroll(function() {
var pTop = $('body').scrollTop();
console.log(pTop + ' - ' + oTop);
if (pTop > oTop) {
blueBoxDelays();
}
});
});
$('.fadeBlock').css('display', 'none');
// REMOVE THIS blueBoxDelays();
function blueBoxDelays() {
var delay = 0;
$('.fadeBlock').each(function(i) {
$(this).delay(400 + delay).fadeIn(1000);
delay = 200 * (i + 1);
});
};
Function $('.fadeBlock').css('display', 'none'); maybe not yet execute
You can put it to $(function(){}) end try again:
$(function() {
$('.fadeBlock').css('display', 'none');
var oTop = $('.blue-box-container').offset().top - window.innerHeight;
$(window).scroll(function() {
var pTop = $('body').scrollTop();
console.log(pTop + ' - ' + oTop);
if (pTop > oTop) {
blueBoxDelays();
}
});
});
Related
I have to make a self-scrolling table. I tried using this:
https://codepen.io/salman31/pen/dYdGLa
var my_time;
$(document).ready(function() {
pageScroll();
$("#contain").mouseover(function() {
clearTimeout(my_time);
}).mouseout(function() {
pageScroll();
});
});
function pageScroll() {
var objDiv = document.getElementById("contain");
objDiv.scrollTop = objDiv.scrollTop + 1;
$('p:nth-of-type(1)').html('scrollTop : '+ objDiv.scrollTop);
$('p:nth-of-type(2)').html('scrollHeight : ' + objDiv.scrollHeight);
//if (objDiv.scrollTop == (objDiv.scrollHeight - 50)) {
objDiv.scrollTop = 0;
//}
my_time = setTimeout('pageScroll()', 25);
}
And it works, but it doesn't automatically scroll back to top when it hits the "bottom". What do I need to change?
Thank you!
try this
var my_time;
$(document).ready(function() {
pageScroll();
$("#contain").mouseover(function() {
clearTimeout(my_time);
}).mouseout(function() {
pageScroll();
});
$('#contain').bind('scroll', function()
{
if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
{
pageScroll();
}
})
});
function pageScroll() {
var objDiv = document.getElementById("contain");
objDiv.scrollTop = objDiv.scrollTop + 1;
$('p:nth-of-type(1)').html('scrollTop : '+ objDiv.scrollTop);
$('p:nth-of-type(2)').html('scrollHeight : ' + objDiv.scrollHeight);
if (objDiv.scrollTop == (objDiv.scrollHeight - 100)) {
objDiv.scrollTop = 0;
}
my_time = setTimeout('pageScroll()', 25);
}
The line:
objDiv.scrollTop = 0
is what's supposed to reset the scroll position, using the if statement you've got commented to execute it only once it's finished scrolling up. With the if statement commented out, the table shouldn't be scrolling at all, as the pageScroll function will always set the scrollTop property to 0.
Try uncommenting the if statement, and making sure that you're subtracting the height of your container from objDiv.scrollHeight in the comparison.
I am currently working on a Parallax Effect using jQuery. For that I am using a JS Class.
When I was first testing the code I thought everything was working fine. However I just found out that the parallax_container divs are behaving differently based on how fast the user is scolling. I am pretty sure that this happens because the window.scroll function just is not accurate enough to use it in this case. Thats why I changed the code and added the setInterval function the change the scrollTop Variable as often as possible, but this didn't change my problem.
Did I take the wrong approach, or is there a clever way to get the scroll Postion in a "linear" way no matter how fast the user scrolls ?
I added the part of the code that seems important to me, but i can post more if needed.
Codepen Example
jQuery(document).ready(function () {
jQuery("." + elemCssClass).addClass("parallax_container");
jQuery("." + elemCssClass).css("position", "relative");
jQuery(".parallax_container").each(function (index) {
jQuery(this).attr('id', 'parallax_' + (index + 1));
});
var lastScrollTop = 0;
var scrollDirect;
var initialTop = parseInt(jQuery("." + elemCssClass).css("top"));
var scr;
setInterval(function () {
scr = jQuery(window).scrollTop()
}, 0.00005);
jQuery(window).scroll(function () {
if (mediaQuery.matches) {
return;
}
if (scr > lastScrollTop) {
scrollDirect = "down"
} else {
scrollDirect = "up"
}
lastScrollTop = st;
var elem = document.querySelector("." + elemParentCssClass);
var visible = ctrl.isInViewport(elem);
if (visible) {
if (scr === 0) {
jQuery("." + elemCssClass).css('top', initialTop);
}
var diff = scr - initY;
var ratio = jQuery("." + elemCssClass).css('top');
// Hier wird der Speed der im VC eingestellt ist angewendet.
// Es wird gechekct ob nach oben oder unten gescrolled wird und entweder + oder - gerechnet
if (scrollDirect === "up") {
jQuery("." + elemCssClass).css({
top: "+=" + elemSpeed + 'px'
});
}
if (scrollDirect === "down") {
jQuery("." + elemCssClass).css({
top: "-=" + elemSpeed + 'px'
});
}
}
else {
jQuery("." + elemCssClass).css('top', 0);
}
var initY = jQuery("." + elemParentCssClass).offset().top
var height = jQuery("." + elemParentCssClass).height()
var endY = initY + jQuery("." + elemParentCssClass).height()
}) //window.scroll()
}) // document.ready()
I've been designing a web infographic with some animations within the page. So I added some JavaScript code in order to trigger the animations as the user reaches them on screen.
My question is how to add many div names in a JavaScript sentence?
The name of the div is "box_info_a", I just need to add some more, but have no idea how.
This is the code:
$(function()
var $window = $(window),
win_height_padded = $window.height() * 1.1,
isTouch = Modernizr.touch;
if (isTouch) {
$('.revealOnScroll').addClass('box_info_a');
}
$window.on('scroll', revealOnScroll);
function revealOnScroll() {
var scrolled = $window.scrollTop(),
win_height_padded = $window.height() * 1.1;
// Showed...
$(".revealOnScroll:not(.box_info_a)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function() {
$this.addClass('box_info_a ' + $this.data('animation'));
}, parseInt($this.data('timeout'), 10));
} else {
$this.addClass('box_info_a ' + $this.data('animation'));
}
}
}); // Close Showed...
// Hidden...
$(".revealOnScroll.box_info_a").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('box_info_a lightSpeedIn')
}
});
}
revealOnScroll();
});
Just do this:
$(document).ready(function () {
$('#trigger').click(function () {
$('#target').addClass("oneClassToAdd anotherClassToAdd");
});
});
All you have to do is put two classes in the parentheses.
I have the following code and I am trying to turn off the function when window resize is run, currently it just keeps running on window.resize.
function headerParallax(x) {
if (x ==="true"){
$(window).scroll(function() {
// Store scrollTop in variable
var scrollPos = $(window).scrollTop();
// var viewportHeight = $(window).height();
console.log(scrollPos + 'bgbottle1');
var bouncePos = ((-1 * (scrollPos - 75) * 1.5) + scrollPos).toFixed(2);
var bouncePos1 = ((-1 * (scrollPos - 150) * 1.25) + scrollPos).toFixed(2);
$(".bottle1").css({ 'background-position': "right " + bouncePos + 'px'});
if (scrollPos > 150){
$(".bottle2").css({ 'background-position': "left " + bouncePos1 + 'px'});
}
});
}else if(x === "false"){
alert("no");
}
}
$(window).resize(function(){
if ($(window).width() < 1200){
window.requestAnimationFrame(headerParallax("false"));
}
});
if ($(window).width() > 1200){
window.requestAnimationFrame(headerParallax("true"));
}
You can try something like this:
var _preflag = -1;
var _unbindScroll = function(){};
// it will be fired only once (when flag is changed)
function headerParallax(flag){
if (flag === _preflag){
return;
}
_preflag = flag;
if (flag){
// TODO adjust the UI for true
window.requestAnimationFrame(theCalculatedValue);
_unbindScroll(); // It's duplicate work to unbind scroll here, but there's no harm calling it :)
$(window).on('scroll', _onscroll);
// update the ubind scroll so that anyone can ubind it safely
_unbindScroll = function(){
$(window).off('scroll', _onscroll);
_unbindScroll = function(){};
};
} else {
// TODO adjust the UI for false
window.requestAnimationFrame(theCalculatedValue);
_unbindScroll(); // unbind scrolling, this is what you want, right?
}
function _onscroll(){
// TODO
}
}
function resize(){
// this will be fired multipe times, need to check it in sub functions to take it once
headerParallax($(window).width() < 1200);
}
$(window).resize(resize);
resize();
hi guys so i have this code ive done which when scrolling the sidebar moves up from bottom to top but im stuck with how to stop the scrolling once the sidebar hits the top of the main conatiner - can someone maybe help me with this?
code is:
$(window).bind('scroll', function () {
var scrolledY = $(window).scrollTop();
$('.parallax-sidebar').css('bottom', '+' + ((scrolledY * 1.3)) + 'px');
});
I have a fiddle example here: http://jsfiddle.net/06qwtgt6/1/
Many thanks!
$(document).ready(function () {
/********************************************************************************/
/* Parallax Scrolling */
// Cache the Window object
var $window = $(window);
$('[data-type]').each(function () {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// For each element that has a data-type attribute
$('div[data-type="background"]').each(function () {
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
$(window).bind('scroll', function () {
if (($window.scrollTop() + $window.height()) > (topOffset) &&
((topOffset + $self.height()) > $window.scrollTop())) {
var yPos = -($window.scrollTop() / $self.data('speed'));
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
var coords = '50% ' + yPos + 'px';
$self.css({ backgroundPosition: coords });
};
});
});
// For each element that has a data-type attribute
$('div[data-type="content"]').each(function () {
$(window).bind('scroll', function () {
var scrolledY = $(window).scrollTop();
$('.parallax-content').css('bottom', '+' + ((scrolledY * 1.3)) + 'px');
});
});
$(window).scroll(function(){
if ($(this).scrollTop() > 150) {
$('.sidebar').addClass('fixed');
} else {
$('.sidebar').removeClass('fixed');
}
});
});
CSS
.fixed {position:fixed; top:0;}
DEMO