I am trying some thing like this
Demo JSFIDDEL
the problem with this code is that it scrolles multiple time when i move the scroll bar up down..
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 50) {
$('.mydiv2').show(1000);
} else {
$('.mydiv2').hide(1000);
}
});
Demo
Check the link. You are hiding a div and showing it again with scroll event. You need to add stop(true) in hiding and showing also
if (y > 50) {
$('.mydiv2').stop(true).show(1000);
} else {
$('.mydiv2').stop(true).hide(1000);
}
var y = $(this).scrollTop();
above statment makes multiple scroll because you scrolling up window using code
Related
Having problems with Scrolltop - have got it to change smoothly when scrolling down, but doesn't revert to the original css when scrolling back up.
I've tried switching the order around but nothing works. Can anyone tell me where my code is wrong?
Thanks
$(function() {
var topblock = $(".topblockfix");
var header = $(".header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() > $('.topblockfix').offset().top) {
if (scroll >= 250) {
topblock.removeClass("topblockfix").addClass("topblockfix-alt");
header.removeClass("header").addClass("header-alt");
} else {
topblock.removeClass("topblockfix-alt").addClass("topblockfix");
header.removeClass("header-alt").addClass("header");
}
}
});
});
You have a logical mistake in the first if-statement.
You are checking the offset top of $('.topblockfix'). But you remove the class .topblockfix and set it to .topblockfix-alt.
So you need to update your if statement:
if ($(window).scrollTop() > $('.topblockfix').offset().top || $(window).scrollTop() > $('.topblockfix-alt').offset().top) {
or you have to cache the value of $('.topblockfix').offset().top somewhere
I currently have a nav bar within my header that I would like to become fixed after the user scrolls past a certain element. I would also like to achieve the same animation effect as seen at http://pixelmatters.com
When I say 'same' I mean using the same nav bar/header element that I'm using at the top, rather than using a duplicate somewhere else in my document.
I've tried to achieve he result with my own code shown below. I've also included a jsFiddle link of my current setup.
jQuery
var bottomElement = $('.dividerWrap').offset().top + $('.dividerWrap').height();
$(window).on('scoll', function() {
var stop = Math.round($(window).scrollTop());
if (stop > bottomElement) {
$('.header').addClass('isFixed');
} else {
$('.header').removeClass('isFixed');
}
});
https://jsfiddle.net/npfc8wsx/1/
I answered something like that few days ago. please take a look at this code:
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var scrollToVid = $('#test').offset().top
console.log(scrollTop); //see window scroll distance //
console.log(scrollToVid); //see scroll to div offest//
if ($(window).scrollTop() >= scrollToVid) {
alert('You reached to the video!');
}
});
jSFiddle
Main Question
now for you some code must change:
$(window).scroll(function () {
var scrollToElem = $('.dividerWrap').offset().top
if ($(window).scrollTop() >= scrollToElem) {
$('.header').addClass('isFixed');
} else {
$('.header').removeClass('isFixed');
}
});
I'm new to this stuff.
I'm using this to make a div appear on scroll and to make it disappear when I scroll further.
It's working pretty good. It fade's out when I pass 1750. But on page load the div is already there. It should appear when I scroll past 1500.
What I need is the div be visible between 1500 and 1750. Hope you can help!
<script type="text/javascript">
$(document).scroll(function () {
var x = $(this).scrollTop();
if (x > 1500) {
$('#form_1_container').fadeIn(150);
} if (x > 1750) {
$('#form_1_container').fadeOut(150);
}
});
</script>
This is the site = http://www.stilld.nl/brrreuk/
You can see if you scroll, that the div appears and disappears. But then it start to pulse...
I'm using display=none on my div.
You can try this
$(document).scroll(function () {
var x = $(this).scrollTop();
if (x > 1500 && x < 1750) {
$('#form_1_container').stop().fadeIn(150);
}
else{
$('#form_1_container').stop().fadeOut(150);
}
});
I am trying to make a div change class to fixed when it reach the top of the page.
I have this JavaScript code.
<script type="text/javascript">
$(function () {
var top = 200;
var y = $(this).scrollTop();
if (y >= top) {
// if so, add the fixed class
$('#kolonne-v').addClass('fixed');
} else {
// otherwise remove it
$('#kolonne-v').removeClass('fixed');
}
});
</script>
What am i doing wrong?
Demo jsFiddle
JS
$(function () {
var top = 200;
//this should be the offset of the top of your div
//which can be found by doing the following line
//var top = $("#kolonne-v").offset().top;
$(window).on('scroll', function () {
if (top <= $(window).scrollTop()) {
// if so, add the fixed class
$('#kolonne-v').addClass('fixed');
} else {
// otherwise remove it
$('#kolonne-v').removeClass('fixed');
}
})
});
Description
This uses the jquery .on('scroll', handler) method, documentation here. The basic principal is that on document.ready you set the scroll point when your div becomes fixed to the top. Then you setup an .on('scroll', handler) event that triggers whenever the window is scrolled in. If the user scrolls to your point you add the fixed CSS class.
I've been working on a scroll to top function for my website, and that part of it works fine. My problem is however that I have a fixed div that is overlapping my footer when it hits the bottom of the page.
Here is the function that I have working.
$(document).scroll(function (e) {
if (document.body.scrollTop >= 800) {
$('#beamUp').show(1000);
} else {
$('#beamUp').hide(1000);
return false;
}
});
Is there somehow I could detect when I hit that part of the page and stop the div from moving past that.Help is much appreciated!
jsFiddle: http://jsfiddle.net/zazvorniki/RTDpw/
Just get the height of the page, minus the height of the div in question, as well as the footer... make sure the top is never greater than that value... you'll also need an onresize event handler re-evaluate that value.
looking at your jsfiddle... here are my edits
In your scroll listener, I am checking for the position of the page, and adjusting the bottom position of the floater appropriately. I also set the initial display:none, so you don't need to call .hide() in your initial script. In addition, resizing the window has the effect of scrolling for your use, so I changed the listener for both events.
$(document).on('scroll resize', function (e) {
var viewHeight = $(window).height();
var viewTop = $(window).scrollTop();
var footerTop = $("footer").offset().top;
var baseline = (viewHeight + viewTop) - footerTop;
var bu = $("#beamUp").css({bottom: (baseline < 0 ? 0 : baseline) + 'px'});
if (viewTop >= 50) {
bu.show(1000);
} else {
bu.hide(1000);
}
});