Need some advice: I'm looking to create a fadeIn/fadeOut script that works responsively as the page scrolls. What I want to do:
on scroll, once it gets to a hidden div, it fades in.
once scroll reaches the top of the page, it fades out.
any future scrolls have the div fade in and out, as it appears/disappears.
Here's a sample code that creates the fadein, but only does it once. I need it to fade in and out each time it is triggered.
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
Any advice?
Thanks, and I hope that made sense!
Have you considered jQuery Waypoints? It's a plugin that allows you to execute functions whenever you scroll to an element.
http://imakewebthings.com/jquery-waypoints/
You can then execute a .fadeIn() on that element when you scroll to it.
Related
This is the javascript & css:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.content-scroll').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */
bottom_of_window = bottom_of_window + 800;
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'margin-top':'0'},10000);
}
});
});
});
CSS:
.content-scroll { margin-top: 1000px; }
I am working on a simple one page wordpress shop website, and have an issue with a script I am using when scrolling to a certain point on a page.
About - Services - Contact - Shop
Each link loads the relevant section of the page correctly, with a smooth effect, but when loading the content in I have implemented some javascript so the content itself within each section scrolls up, as you can see my example test website here:
http://test.flixonstudios.co.uk/
When clicking the Shop link it loads the last section on the page... but as you can see, it kind of judders, and if you scroll up slightly, the scrolling script is still happening.
Can anyone recommend how to make it if I were to for example, click on the Shop link, all of the content above it would load instantly, rather than scroll?
The concept is for a user to go through each section, 1 at a time but once someone has viewed all the content, and returns to the website they would just want to go directly to the shop section.
Any feedback appreciated. Thank you for reading.
You can remove all the scrolling event handlers and just have the sections/nav buttons (About, Services.. etc) have anchor tags that have a hash in the href attribute that corresponds to the section on the page that you want it to navigate to, like in your contact section for example, just add an id of 'contact' inside the h2 element that corresponds with this section, then assign the tag that you wrap around your nav button ('Contact') an href of /#contact
Can I make a ribbon in the footer like this:
http://cfni.org/
That means float till some time and then scroll.
It's a matter of changing the position of the element from fixed to absolute. In this example, I used jQuery to find when the bottom of the div was approaching and then reassign the position value for the ribbon div.
Here's the code:
//WINDOW LOAD
jQuery( window ).load(function() {
jQuery( window ).on( "scroll", function(){
// When Scroll gets to the bottom, keep the ribbon absolute instead of fixed.
if(jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() - 50){ // This value determines the height when the position changes
jQuery('.ribbon').css({"position":"absolute"});
} else {
jQuery('.ribbon').css({"position":"fixed"});
}
});
});
And here's a link to working example
I'm planning to use a jQuery plugin called charts.js
for graphs and charts. However, on a larger page, the animations of those graphs get completed even before the user sees them.
My question is, how do we fade in the content of a particular div/section only when it is visible inside the viewport as exactly depicted on charts.js website. The content fades in sequentially as we scroll down and hence even the animations of the graphs aren't missed. How can I achieve this with the help of jQuery?
Take a look at this jsFiddle. The author fades in boxes as they become visible. You porbably need to call chart.js to create the graphs as they become visible, rather than just fade them in (that is if you want the fancy graph animations, rather than just a fade-in :-)) I have tweaked the fiddle and included it below:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.graph').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
//Code to initialize the graph here.
//This initialization should probably
//be deferred, to ensure performance,
//and the graphs should be marked as
//initialized so we dont't init them
//multiple times (possibly by changing
//their class so .each ignores them).
}
});
});
});
Mika's Viewport Selectors plugin works for the browser window viewport and not html elements. In other words if you got some css like #container{width:350px;height:150px;overflow:auto;} it will not work when scrolling.
I recommend trying his other plugin, Lazy Load
Here's an example: http://jsbin.com/efazos/1/edit
The following code will enable you to determine whether an element is within the window on the scroll of the document. From there you can enable your chart and do whatever animations you like :
<script type="text/javascript">
$(document).ready(function() {
$(document).on('scroll', function() {
//Get Div 1's Top and Left offsets from the Document.
var divTop = $('#div1').offset().top;
var divLeft = $('#div1').offset().left;
//Get the current window height and width.
var winHeight = $(window).height();
var winWidth = $(window).width();
if (divPos <= winHeight && divLeft <= winWidth) {
//Div is visible in window
//Fade in Chart
}
});
});
</script>
I am designing a site with a sticky nav appearing after scrolling past the header.
I got this to work using this script:
$(window).load(function(){
// Get the headers position from the top of the page, plus its own height
var startY = $('#header').position().top + $('#header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('#navbar').slideDown();
}else{
$('#navbar').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
});//]]>
The problem is the scrip reads the height of my header on load, but because my header height is 100% of the viewport, when one resizes the window, the nav appears either too late or too early.
For example loading the page with a 670px high viewport, sized down to a 400px viewport. My header shrinks along to 400px high, even though te nav only appears after 670px
any way to fix this?
thanks
Put your javascript function trigger in a document.ready() instead of a window.load() ?
Try moving this part OUT of the window.load().
$(window).scroll(function(){
checkY();
});
Try this:
$(window).on("load resize",function(e){
// Get the headers position from the top of the page, plus its own height
var startY = $('#header').position().top + $('#header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('#navbar').slideDown();
}else{
$('#navbar').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
});//]]>
It's only the first line (on load resize) that is modified.
I have more than 70 divs on my page.
I don't want to show all the divs at once until user scrolls page.
I am trying to hide overflown elements on my page, while user scrolls the page , hidden divs should be fading in again.
But i am not able to hide overflown elements and not finding any way to fadeIn overflown elements again if window is scrolled.
However i gave it a try-
$(function(){
$(window).css("overflow","hidden");
var lengthy= $('.content').length;
alert(lengthy);
var scrollbottom= $(window).scrollTop()+$(window).height();
$(window).scroll(function(){
$(document).css("overflow","hidden");
if($(window).height() >scrollbottom)
{
$(document).fadeIn();
}
});
});
Jsfiddle
How can this be done?
EDIT your Jquery to somthing like this
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});
What this does is the scroll happens when it's reaches 10px before end of page and not necessary the very end of the page. It's not necessary to have it, but it gives greater control to define at what point page should scroll...
This Example will show you what i think you want
http://www.webresourcesdepot.com/dnspinger/