I used this code to get the element to fade in when scrolling:
<script language="JavaScript">
$(document).ready(function() {
$(window).scroll( function() {
$('#floatingDIV4').each( function() {
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if (bottom_of_window > bottom_of_object) {
$(this).animate({'opacity':'1'}, 500);
}
});
});
});
</script>
i try to find a code that makes the element that is appearing at scroll to fade out at the top position but i don't find any. Do you have any ideas about it?
Edit:
The answers was really good but the codes didn't work.
if (bottom_of_window > bottom_of_object) {
$(this).animate({ scrollTop: 0,
opacity: 0
},'slow');
}
This will scroll to the top, and fade at the same time.
However if you was looking for the code to fade only when it has finished moving to the top, you could use:
if (bottom_of_window > bottom_of_object) {
$(this).animate({ scrollTop: 0,},
complete: function(){
$(this).animate({opacity:0})
)};
}
But so that the box is visible as it is fading, the scrollTop: value would need to be higher than 0, eg. the height of the box in px.
use this
if (bottom_of_window > bottom_of_object) {
$(this).animate({ scrollTop: 0, opacity: 0 },'slow');
}
if this answer is correct then please mark it as answer for others....
may be this help you
function show_coords(event)
{
var x=event.clientX;
var y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}
compare the value of X ,Y with some predefined value
Related
I use the code given below for my back to top option
$(window).scroll(function() {
if ($(this).scrollTop()) {
$("#to-top").fadeIn();
} else {
$("#to-top").fadeOut();
}
if($(window).scrollTop() + $(window).height() < $(document).height() - $("#footer").height()) {
$('#to-top').css("position","fixed"); //resetting it
$('#to-top').css("bottom","0"); //resetting it
}
if($(window).scrollTop() + $(window).height() > $(document).height() - $("#footer").height()) {
$('#to-top').css("position","relative"); // make it related
$('#to-top').css("bottom","188px"); // 60 px, height of #toTop
}
});
$("#to-top").click(function() {
$("html, body").animate({scrollTop: 0}, 1000);
});
but it does not work while i scroll down, because my content has the position relative as well as i have a floting div which position is absolute.In above code i need to set the position of my content is absolute.If i do this the two content displace.
here is my html code:
<a id="to-top" style="position:fixed;bottom:0px;right:15px;" href="#" title="Back to Top"><img src="../images/BackToTop_icon.jpg"/></a>
how can i fixed this problem..
if you don't want to animate anything, then window.scrollTo(0,0) will do. (x coord, y coord).
If you want to animate it, then this will do:
$('body').animate({scrollTop:0},2000);
no need to create old html hash-anchors (www.domain.com/index.html#paragraph2), jQuery does the trick :)
This is now correct and it works....
$(document).ready(function() {
$("#to-top").css("display","none");
});
$(window).scroll(function() {
if ($(this).scrollTop()) {
$("#to-top").fadeIn();
} else {
$("#to-top").fadeOut();
}
if($(window).scrollTop() + $(window).height() < $(document).height() - $("#sc-main-footer").height()) {
$('#to-top').css("position","fixed"); //resetting it
$('#to-top').css("bottom","0"); //resetting it
}
if($(window).scrollTop() + $(window).height() > $(document).height() - $("#sc-main-footer").height()) {
$('#to-top').css("bottom","188px");
}
});
$("#to-top").click(function() {
$("html, body").animate({scrollTop: 0}, 1000);
});
Sorry for the terrible title, but I'm not sure how else to describe what I'm trying to build. I'm using some code I found on this site, basically what I'm trying to do is build a left handed navigation menu, that highlights the appropriate section as the user scrolls to it.
$(document).ready(function() {
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
animationTime = 600, // time in milliseconds
contentTop = []; //array of sidebar links
$('nav ul').append('<div id="slider"></div>');
var sliderTop = $("nav ul li a").eq(0).parent().position().top;
var sliderLeft = $("nav ul li a").eq(0).parent().position().left;
var sliderHeight = $("nav ul li a").eq(0).parent().outerHeight();
$('#slider').css({
'height': sliderHeight,
'left': sliderLeft,
'top': sliderTop,
'width': '100%'
});
// Stop animated scroll if the user does something
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e) {
if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
$('html,body').stop();
}
})
// Set up content an array of locations
$('#sidebar').find('a').each(function() {
contentTop.push($($(this).attr('href')).offset().top);
})
// Animate menu scroll to content
$('#sidebar').find('a').click(function() {
var sel = this,
newTop = Math.min(contentTop[$('#sidebar a').index($(this))], $(document).height() - $(window).height()); // get content top or top position if at the document bottom
$('html,body').stop().animate({
'scrollTop': newTop
}, animationTime, function() {
window.location.hash = $(sel).attr('href');
});
return false;
})
//scroll function
function scroller() {
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each(contentTop, function(i, loc) {
if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt) >= bodyHt))) {
//animate slider
x = $("#sidebar li").eq(i).position();
$("#slider").animate({
top: (x.top)
}, 100);
}
})
}
//scroll event handler
$(window).scroll(scroller)
})
I have most of it working, however when you actually click a link on the menu the animation is very slow to catch up with the actual scrolling. I understand why this is happening, because it updates the position one at a time after each section is reached, but I'm wondering if there's a way to make this animation faster, and more fluid. I've attached a fiddle with my code, thank you in advance for your help!
http://jsfiddle.net/jamesmyers/6mbmq1pe/
You will get a better slider animation effect by temporarily detaching the scroll handler and scrolling the slider directly, with the same animationTime as for the main animation.
To do this, you also need to :
namespace the scroll event .nav, to allow safe use of .off()
stop() the slider animation in the "if the user does something" block
I've also included a few efficiency savings in the way contentTop and #slider are set up but these are not actually necessary.
$(document).ready(function() {
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
animationTime = 600, // time in milliseconds
contentTop, //array of sidebar links
navLinkWrapper = $("nav ul li a").eq(0).parent();
var $slider = $("<div id=\"slider\" />").css({
'height': navLinkWrapper.outerHeight(),
'left': navLinkWrapper.position().left,
'top': navLinkWrapper.position().top,
'width': '100%'
}).appendTo($('nav ul'));
// Stop animated scroll if the user does something
$('html,body').on('scroll mousedown DOMMouseScroll mousewheel keyup', function(e) {
if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
$('html,body').stop();
$slider.stop(); //<<<<<<<
}
});
// Set up content an array of locations
contentTop = $('#sidebar a').map(function() {
return $($(this).attr('href')).offset().top;
});
// Animate menu scroll to content
$('#sidebar a').on('click', function(e) {
e.preventDefault();
$(window).off('scroll.nav', scroller); //<<<<<<<
$slider.stop().animate({ //<<<<<<<
top: ($(this).closest("li").position().top) //<<<<<<<
}, animationTime); //<<<<<<<
var sel = this,
newTop = Math.min(contentTop[$('#sidebar a').index($(this))], $(document).height() - $(window).height()); // get content top or top position if at the document bottom
$('html,body').stop().animate({
'scrollTop': newTop
}, animationTime, function() {
window.location.hash = $(sel).attr('href');
$(window).on('scroll.nav', scroller); //<<<<<<<
});
});
//scroll function
function scroller() {
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each(contentTop, function(i, loc) {
if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt) >= bodyHt))) {
//animate slider
$slider.animate({
top: ($("#sidebar li").eq(i).position().top)
}, 100);
}
});
}
//scroll event handler
$(window).on('scroll.nav', scroller); //<<<<<<<
});
Updated fiddle
I'm trying to reduce an elements top padding smoothly on scroll. At the same time i want the 2 child elements to fade, 1 of them out and 1 in. Ive got the fading right but i cant get the padding top to work correctly. Can anybody see what may be wrong with my function?
$(window).scroll(function () {
$('.transitionParent').css({
'padding-top' : $(this).scrollTop()-($(this).scrollTop()/500)
});
$('.ipadOutline').css({
'opacity' : 1-($(this).scrollTop()/500)
});
$('.ipadPhoto').css({
'opacity' : 0+($(this).scrollTop()/500)
});
});
http://jsfiddle.net/pXdhB/1/
I've also tried (with no luck!)
var fromTop = $(window).scrollTop();
$('.transitionParent').css('padding-top', '-' + (100 - fromTop));
Something like this?
DEMO http://jsfiddle.net/pXdhB/7/
JQUERY
$(window).scroll(function () {
$('.transitionParent').stop().animate({
'padding-top': $(this).scrollTop() - ($(this).scrollTop() / 500)
}, 1000, function () {
// Animation complete.
});
$('.ipadOutline').css({
'opacity': 1 - ($(this).scrollTop() / 500)
});
$('.ipadPhoto').css({
'opacity': 0 + ($(this).scrollTop() / 500)
});
});
Like this?
$(window).scroll(function () {
$('.transitionParent').css({
'padding-top' : 100 - ($(this).scrollTop()-($(this).scrollTop())/500)
});
$('.ipadOutline').css({
'opacity' : 1-($(this).scrollTop()/500)
});
$('.ipadPhoto').css({
'opacity' : 0+($(this).scrollTop()/500)
});
});
http://jsfiddle.net/DkM8a/
Try this. Here is relevant code:
var st = $(this).scrollTop(),
newPt = 100 - st;
console.log(st + " " + newPt)
if (newPt > 0) {
$('.transitionParent').css({
'padding-top' : newPt
})
}
demo: http://jsfiddle.net/pXdhB/8/
I am trying to make a simple sticky header that will follow the user down the page as they scroll.
So far I have:
$(document).scroll(function() {
var topmarg = $(document).scrollTop();
$('#stickyheader').animate({ marginTop : "+=" + topmarg + "px" }, "slow" );
});
Which works, but it seems to 'add' the amounts to marginTop, so, for example, if I scroll down 200px then back up 100px the #stickyheader will actually move 300px down the page, rather then 200 down then 100 back up.
Is there a way to ammend this? Should I be using .css() instead?
var lastscroll=0;
$(document).scroll(function() {
var topmarg = $(document).scrollTop();
if(topmarg>lastscroll){
$('#stickyheader').animate({ marginTop : "+=" + topmarg + "px" }, "slow" );
}else{
$('#stickyheader').animate({ marginTop : topmarg + "px" }, "slow" );
}
lastscroll =topmarg;
});
I'm building a website. http://check.topicwine.com
Have a look to see my work.
I want to make a static sidebar. I'm using the code:
$(function() {
var offset = $("#ad-wrapper").offset();
var topPadding = 60;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#ad-wrapper").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#ad-wrapper").stop().animate({
marginTop: 0
});
};
});
});
The sidebar comes along, but it also goes where it shouldn't. I mean, it enters the footer as well. Rather, it overlaps the footer.
I want it to stop next to the grid.
Thanks, in advance. :)
Add overflow:hidden to div#content. This way we will get the proper height of the content div.
Now $('#content').height() + $('#content').offset().top is the maximum distance the sidebar should move. Which means, the sidebar's offset.top + height should not go more than this.
Add this check in your scroll handler
Set a limit for the top margin, since the sidebar can't go past the $('#main') element.
$(function() {
var offset = $("#ad-wrapper").offset();
var topPadding = 60;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop(); // Store this for convenience
if (scrollTop > offset.top) {
var newMarginTop = scrollTop - offset.top + topPadding;
// The sidebar can only go so far!
var marginLimit = $('#main').height() + $('#main').offset().top - offset.top - $("#ad-wrapper").height();
if (newMarginTop > marginLimit)
newMarginTop = marginLimit;
$("#ad-wrapper").stop().animate({
marginTop: newMarginTop
});
} else {
$("#ad-wrapper").stop().animate({
marginTop: 0
});
}
});
});