I am creating a timeline of events on my website, and I am trying to get each element (with a class '.event') to fade in as you scroll down through timeline. I am having issues - they all fade in together at the same time rather than individually.
Any ideas why? Thanks in advance!
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.event').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);
}
});
});
});
Based on your JSFiddle this seems to be linked to a styling and/or markup issue.
Here's an updated version of your JSFiddle that works with your code and your markup: http://jsfiddle.net/2yMn4/2/. It messes up your layout a little bit, so you might need to rethink the structure, but hopefully that points you in the right direction. The main change that got it started working was switching your .event class to be relatively positioned. Then removing the second .posts-timeline article and .posts div.
.event {
position: relative;
opacity: 0;
left: 50%;
width: 210px;
z-index: 100;
min-height: 100px;
}
Related
I have a fixed navbar on my site that I'm trying to tie functions to once it reaches a certain point on the page. I've done this successfully three times before on three sites but can't for the life of me get it to work on this one. The function is wrapped in a window ready so I know the page is fully loaded -- completely stumped for two days... Here the code:
jQuery:
function startchange() {
$('#ajax-frame').imagesLoaded().done(function(instance) {
var scroll_start = 0;
var startchange = $('.startchange');
var offset = startchange.offset();
if (startchange.length) {
$(document).on( 'scroll', function() {
scroll_start = $(this).scrollTop();
if (scroll_start > offset.top) {
$('nav').addClass('active');
console.log("startchange working");
} else {
$('nav').removeClass('active');
};
});
}
});
};
CSS:
body,
html {
height: 100% !important;
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
Thanks for any insight into this frustrating issue.
One quick approach that will sove the issue is to remove: overflow-x: hidden; from your css. Demo: https://jsfiddle.net/mrlew/ce8me3qk/
But here is what's happening: you're setting body and html to height 100%, and one is overlapping the other (html tag is a block element too). You're setting both to height: 100% and actually what you're scrolling is body, and not window/document.
Proof: look at both scrollbar there when setting overflow to scroll: https://jsfiddle.net/mrlew/ce8me3qk/8/ Note that you're scrolling the inner one. So, if you change $("document").on('scroll', function() { to $("body").on('scroll', function() {, it will work too.
Or, just don't set html height to 100%.
My situation is this:
I have a large container the size of the screen which is static and has overflow:hidden. Inside is a very large div that is jqueryui-draggable. Inside that are many many small divs.
The small divs are all hidden by default, I'd like them to appear when they move into the viewport(top parent container) and disappear when moved out. Keep in mind all the moving is done by dragging the very large middle div.
Most of the solutions I've found only work on page scroll. Is there some sort of event I could bind to the draggable?
Disclaimer
I haven't tested this, but hopefully it at least gives you a direction.
The biggest concept to grasp is to check each child to determine whether it is fully within the viewport every time the .drag() method is called on your draggable container. You can modify the logic to fade your elements in / out as needed or to allow the child to be considered visible even before it is fully within view.
CSS
.parent {
position: absolute;
overflow: hidden;
height: 5000px; /* example */
width: 5000px; /* example */
}
.child {
position: absolute;
height: 50px;
width: 50px;
}
HTML
<body>
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<!-- ... -->
</div>
</body>
JQUERY
$( ".parent" ).draggable({
drag: function( event, ui ) {
var parentTop = ui.position.top;
var parentLeft = ui.position.left;
var windowHeight = $(window).height();
var windowWidth = $(window).width();
$('.child').each(function(index) {
var childTop = $(this).position().top;
var childLeft = $(this).position().left;
var childWidth = $(this).width();
var childHeight = $(this).height();
// check whether the object is fully within the viewport
// if so - show, if not - hide (you can wire up fade)
((childLeft >= -(parentLeft) && childTop <= -(parentTop) &&
(childLeft + childWidth) <= (-(parentLeft) + windowWidth) &&
(childTop + childHeight) <= (-(parentTop) + windowHeight)))
? $(this).show()
: $(this).hide();
});
}
});
This question already has an answer here:
jQuery window.scroll move div vertical in opposite direction
(1 answer)
Closed 7 years ago.
How can I reverse the scroll function of my website such that when the user scrolls up, the page will scroll down in the opposite direction?
Doing this for the entire page is going to give a very broken experience.
You'll wind up doing something like the following, where you find the height of your content, then start manually positioning it within a fixed viewport:
var $window = $(window), $container, height;
$(function() {
$container = $('#content');
// Add some content
for (var i = 0; i < 1000; ++i) {
$container.append('<h1>line ' + i + '</h1>');
}
height = $container.outerHeight();
$('body').css('height', height + 'px');
// Set up scroll handling, but also invoke once to initialize positions
$window.on('scroll', onScroll);
onScroll();
});
function onScroll() {
scrollTop = $window.scrollTop();
$container.css('top', (scrollTop - height + $window.height()) + "px");
}
#content {
position: absolute;
}
#viewport {
position: fixed;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewport">
<div id="content">
</div>
</div>
Basically, #viewport remains fixed infront of the user, occupying the whole screen. The content scrolls backwards inside of #viewport while the HTML document scrolls normally.
Meanwhile, #content has a height of ~50,000px, which I read and apply directly to the document, so that there will be a scroll bar of the appropriate size even though #content is contained within #viewport which has a fixed height set to that of the window.
Then, on scroll, the actual content gets position so that it moves upwards by the same distance you've scrolled with scrollTop.
Let's say I have a single HTML page. 2000 pixels long for example. I want to detect if a visitor reaches a certain point on the page.
The page structure:
0px = begin of the page;
500px = about us page;
1000px = contactpage;
Is there a way with jQuery to detect if a user reaches the points described above?
You probably want jQuery's scroll event-binding function.
Yes, I would create three divs and then have a mouse over event on each. Example:
$("#begin").mouseover(function(){
alert("over begin");
});
$("#about").mouseover(function(){
alert("over about");
});
$("#contact").mouseover(function(){
alert("over contact");
});
You can see a working fiddle here: http://jsfiddle.net/ezj9F/
Try THIS working snippet.
Using this code you don't have to know position of the element you want to check if it is visible.
JQuery
var $window = $(window);
// # of pixels from the top of the document to the top of div.content
var contentTop = $("div.content").offset().top;
// content is visible when it is on the bottom of the window and not at the top
var contentStart = contentTop - $window.height();
// content is still visible if any part of his height is visible
var contentEnd = contentTop + $("div.content").height();
$window.scroll(function() {
var scrollTop = $window.scrollTop();
if(scrollTop > contentStart && scrollTop < contentEnd) {
console.log('You can see "HELLO"!');
} else {
console.log('You cannot see "HELLO"!');
}
});
HTML
<div class="scroll"></div>
<div class="content">HELLO</div>
<div class="scroll"></div>
CSS
div.scroll {
background-color: #eee;
width: 100px;
height: 1000px;
}
div.content {
background-color: #bada55;
width: 100px;
height: 200px;
}
EDIT: Now the algorithm is checking if any part of the div.content is visible (it is considering height of the element). If you are not interested in that change contentEnd to var contentEnd = contentTop.
I need that when I scroll down or up with mouse wheel or sidebar my div change incrementally the Y position (for example 50px up or down ). I need this in Javascript/Jquery.
I Try this code, but only works for scrolling down(The Scrolling Down and Up Function is working well, only the animate part is working wrong):
UPDATE:
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $("body").offset();
$(window).scroll(function ()
{
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top)
{
$("#legend").stop().animate({ marginTop: "+=50px",}, 'slow', "easeOutCirc" );
}
else
{
$("#legend").stop().animate({ marginTop: "-=50px",}, 'slow', "easeOutCirc" );
}
});
});
$(window).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
$(document).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
Thanks
You can use
$(window).scroll(function() {
// Your scroll code here
});
to grab whenever the user is scrolling on the page.
Next you want to change the div's y-value.
If the div is positioned absolute, this is just changing its top-value.
$('my-div').top = original-top-value + $(window).pageYOffset;
I believe you need is to keep the div always showing even when user scrolls down. If that is the case then it can be done with only CSS:
div {
position: fixed;
z-index: 100;
top: 100px;
left: 100px;
}
The values of z-index, top and left are dummy values. Change em with your ones.
UPDATE:
Since CSS Solution won't work for you, here is a working example writter in JS: http://jsfiddle.net/qCtt5/