I'm blurring out a div on scrolling using the following script. What's the best way to wrap it into something telling it: only do this until #element hits the views top and then stop it. Something like a max-val.
$(window).on('scroll', function () {
var blurrad = $(document).scrollTop()
blurrad = blurrad / 100;
$(".videodummy").css({"-webkit-filter": "blur("+blurrad+"px)","filter": "blur("+blurrad+"px)" })
});
UPDATE:
First of all, thanks for your help. I tried to do this:
var topdist = $('#indicator').offset().top
while ( topdist > 0 ) {
$(window).on('scroll', function () {
var blurrad = $(document).scrollTop()
blurrad = blurrad / 100;
$(".videodummy").css({"-webkit-filter": "blur("+blurrad+"px)","filter": "blur("+blurrad+"px)" })
});
});
So if the div with #indicator hits top it should stop blurring, however this is not working at all.
Based on your try:
var topDist = $('#indicator').offset().top;
$(window).on('scroll', function () {
topDist = $('#indicator').offset().top;
if (topDist > 0) {
var blurrad = $(document).scrollTop();
blurrad = blurrad / 100;
$(".videodummy").css({"-webkit-filter": "blur("+blurrad+"px)",
"filter": "blur("+blurrad+"px)" });
}
});
I'd advice against a while since it's really not needed. Instead check with an if statement.
$('#element').offset().top
Will give you the distance from top
Related
I want to stop scroll after a dynamic div reaches its end. This div will be holding dynamic content so the size never stays the same. I know how to lock in position when scroll hits a pre-defined height, but not sure how to do it when the hight is constantly changing. here's what i'm using for my standard locking scroll when it hits specific point:
var profile_rc = $("#profile-rc");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 285) {
profile_rc.addClass("p-right-column");
} else {
profile_rc.removeClass("p-right-column");
}
});
Looks like you are using jQuery, the following 2 examples might help.
Detecting dynamic height of screen
<script>
$(function(){
var windowHeight = $(window).height();
$(window).resize(function() {
windowHeight = $(window).height();
console.log(windowHeight);
});
});
<script>
Detecting dynamic height of a div
<script>
$(function(){
var divHeight = $('#your-div-id').css("height");
$( window ).on("resize", function() {
divHeight = $('#your-div-id').css("height");
console.log(divHeight);
});
});
</script>
I got it to work doing this:
$(window).scroll(function() {
var divHeight = $('#farleft-cont').outerheight(true);
var ycbc = $('#target-div');
var scroll = $(window).scrollTop();
if (scroll >= divHeight) {
ycbc.addClass("target-div-fixed");
} else {
ycbc.removeClass("target-div-fixed");
}
});
Im new in Javascript, Im sorry for the armature questions
i have a fadein code only for one class that works perfect, here is the code:
jQuery(document).ready(function($) {
var fadeinbig = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.fadeinbig').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('fadeinbig')) {
$(this).removeClass('fadeinbig');
}
});
}
fadeinbig();
$(window).on('scroll resize', fadeinbig);
I would like to add some more classes like, fadeinleft, fadeinright, etc.
like this:
jQuery(document).ready(function($) {
var fadeinbig = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.fadeinbig').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('fadeinbig')) {
$(this).removeClass('fadeinbig');
}
});
}
fadeinbig();
$(window).on('scroll resize', fadeinbig);
});
jQuery(document).ready(function($) {
var faidinbottom = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.faidinbottom').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('faidinbottom')) {
$(this).removeClass('faidinbottom');
}
});
}
faidinbottom();
$(window).on('scroll resize', faidinbottom);
});
jQuery(document).ready(function($) {
var faidintop = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.faidintop').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('faidintop')) {
$(this).removeClass('faidintop');
}
});
}
faidintop();
$(window).on('scroll resize', faidintop);
If you ask me why my code is with removeClass, not with addClass, it is becouse it is easer for me to manipulate whit my content, without changing the base css styles of my website. I just add some classes "faidintop, faidinbottom etc." to the style sheet, then to the class of a div, and the magic happens.
I will be very grateful if some one could help me whit this, or at least give me some directions, how to do it the right way.
Is there a way to have the div called #middlecta stop scrolling when it reaches #footer?
FIDDLE:
http://jsfiddle.net/BP6rq/1522/
var pointOne = $("#form").offset().top;
$(window).on("scroll", function () {
$.fx.speeds.xslow = 750;
if ($(this).scrollTop() > pointOne) {
$("#middlecta").fadeIn('xslow').addClass('fixed');
} else {
$("#middlecta").fadeOut('xslow').removeClass('fixed').hide();
}
$("#middlecta-t").addClass("mob");
});
You definitely want to play around with the CSS. Setting a 100px margin may or may not be a good idea. But, this should get you thinking on the right track at least.
var pointOne = $("#form").offset().top;
var pointTwo = $('#footer').position().top;
var $midCta = $("#middlecta");
$(window).on("scroll", function () {
$.fx.speeds.xslow = 750;
if ($(this).scrollTop() > pointOne) {
$midCta.fadeIn('xslow').addClass('fixed');
} else {
$midCta.fadeOut('xslow').removeClass('fixed').hide();
}
if ($midCta.offset().top > pointTwo) {
$midCta.css('bottom', 150);
$midCta.fadeOut('xslow').removeClass('fixed');
}
$midCta.addClass("mob");
});
http://jsfiddle.net/BP6rq/1523/
I have a function to set a top in a div, for show the notices.
Now i just want to put a delay to this function (effect), because the "top" is set to fast, and it's so horrible.
var rolarbaixo = function() {
var newtop = $('.plugin-noticias-rolar').position().top - 80;
$('.plugin-noticias-rolar').css('top', newtop + 'px').delay( 800 );
}
I tried to use .delay, but doesn't work.
Any help?
I gues what you want here is animate() to keep a smooth transition, try this:
var rolarbaixo = function() {
var newtop = $('.plugin-noticias-rolar').position().top - 80;
$('.plugin-noticias-rolar').animate({top : newtop + 'px'},800);
}
So What I am trying to do is I have 3 div each div should scroll over the another div and when it reaches the top it's position should be fixed.
So everything is working fine until we resize the window(It needs refresh of page).
How to fix this ? I mean can't we do this without refreshing the page ?
I used resize but it's not working for me. And I'm not sure whether this is the right way of using resize
The JSFiddle copy of my work
var $cache = $('#two');
var $cache2=$('#three');
var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
var vTop2 = $cache2.offset().top - parseFloat($cache2.css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
var vTop2 = $cache2.offset().top - parseFloat($cache2.css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= vTop) {
$cache.addClass('stuck');
$('#one').addClass('stuck');
$('#two h2').addClass('stuck');
} else if(y>=vTop2)
{
$('#two h2').removeClass('stuck');
}
else {
$cache.removeClass('stuck');
$('#one').removeClass('stuck');
$('#two h2').removeClass('stuck');
}
});
Use window.onresize to handle elements:
window.onresize = function(event) {
//handling code in between
}