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/
Related
I am not an advanced coder and I am struggling with making these two overflow boxes move the div lines left and right, I tried with using this existing code: http://jsfiddle.net/pWUDJ/275/
$(window).scroll(function() {
$("div#mydiv").css({
"right": $(window).scrollTop() + "px"
}).text("hello:"+$(window).scrollTop());
});
My code Is — http://jsfiddle.net/millington/6v1fc7bj/
$(window).scroll(function() {
$("div#l2").css({
"right": $("#leftscr").scrollTop() + "px"
}).text("left&right:"+$("#leftscr").scrollTop());
});
Please Help If you can ! :D
Try this :
$(window).scroll(function() {
var div_offset = $("#leftscr").offset().top;
var window_scroll = $(window).scrollTop();
var scroll = (1- (div_offset - window_scroll)/div_offset) * 100;
if(scroll < 100) {
$("div#l2").css({
"left": scroll + "%"
}).text("left&right:"+scroll + "%");
}
});
http://jsfiddle.net/6v1fc7bj/1/
if required in px
$(window).scroll(function() {
var div_offset = $("#leftscr").offset().top;
var window_scroll = $(window).scrollTop();
if(window_scroll < div_offset) {
$("div#l2").css({
"left": window_scroll + "px"
}).text("left&right:"+window_scroll + "px");
}
});
http://jsfiddle.net/6v1fc7bj/2/
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);
});
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
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
});
}
});
});