I have some div and I want that, when I click on one of them, it automatic scroll to the top of the current window.
So, I calculated the current position (relative to the window), I calculated the height of the window, and I animated scroll to the position given by the difference between the previous numbers. But it doesn't scroll. Why?
Full code: http://jsfiddle.net/8dhhbk9r/
JS code:
$('.post').each(function() {
var post = $(this);
post.text( post.position().top - $(window).scrollTop() );
post.click(function() {
var where = post.position().top - $(window).scrollTop();
var h = $(window).height();
var scrollTo = h - where;
post.animate({
scrollTop: scrollTo
}, 800);
});
});
$(".post").on("click", function(){
$("body, html").animate({'scrollTop': $(this).offset().top}, 1000 );
});//click
Related
I have this jsfiddle: https://jsfiddle.net/3ncyxnzt/
It currently works well as far as always stopping at a specified margin from the top of the page, but I'd like to make it also stop at the bottom, before it goes under/over the footer. Any ideas on how to make that moving red box stop right above the green footer? The height of the footer is 1000px, so I'd somehow need to set the moving box to stop at 1000px from the bottom.
Here's the code I have so far:
(function(jQuery) {
var element = jQuery('.move'),
originalY = element.offset().top;
var topMargin = 110;
element.css('position', 'relative');
jQuery(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 200);
});
})(jQuery);
I modified following line by adding static value 290 and it reached to bottom.
scrollTop - originalY + topMargin + 290
Is this what you trying to achive?
(function(jQuery) {
var element = $('.move'),
originalY = element.offset().top,
otherDiv = 1000,
staticHeight = $('.other-div').height()-$(element).height(); // Fixed number to stop the move-element before the footer
var topMargin = 110;
jQuery(window).on('scroll', function(event) {
var offset = element.offset().top;
var scrollTop = $(window).scrollTop();
// Check if the move-block gets under the footerblock
if(scrollTop < otherDiv){
element.stop(false, false).animate({
top: scrollTop - originalY + topMargin
}, 200);
}else{
element.stop(false, false).animate({
top: staticHeight //If so, make sure it gets on top of the footerblock staticly
}, 200);
}
});
})(jQuery);
I think you need an if/else statement to check if the block gets behind the height of the div called "other-div".
See the working example here: https://jsfiddle.net/crix/z578c9bo/
Hope it helps!
I am trying to implement a sidebar to follow the user's screen as he or she scrolls up or down in the browser page. However I am getting an issue where the sidebar continues to scroll down the page infinitely if the user keeps scrolling down.
var element = $('#movingBox'),
originalY = element.offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 100;
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 300);
});
Is there a way to limit the sidebar from scrolling too far down than its supposed to?
I hope I have understood your question. You want to stop the box following at a certain position like this ?
var element = $('#movingBox'),
originalY = element.offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 100;
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
var stop = $('#stop').offset().top; // or in pixel
stop -= $('#movingBox').height() + topMargin;
if (scrollTop<stop) {
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 300);
}
});
Try the example in JSFiddle
I have a page with a simple div. If the div is at the top of the page, the background image (a very long vertical wallpaper) should also only be displaying the top section. If we scroll all the way down, then at the last area way at the bottom, the bottom of the background will show. The effect is that it's like a parallax where the scrolling of the content and background image occur in tandem and are scaled to each other.
How would I do this?
Update: My attempt is something like this:
function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
$(window).scroll(function(){
var current = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var scale = 100*(current/bottom);
$('body').css({
'background-position':scale+'%'
});
});
}
I don't really know how to work with variables within quotes however.
Update: I got it to work using this:
function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
$(window).scroll(function(){
var current = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var scale = 100*(current/bottom) + "%";
document.body.style.backgroundPosition = "center " + scale;
});
});
}
But there seems to be very bad impact on performance. Is there any way to make it more responsive and faster?
CSS:
background-attachment: fixed;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
This worked for me:
function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
$(window).scroll(function(){
var current = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var scale = 100*(current/bottom) + "%";
document.body.style.backgroundPosition = "center " + scale;
});
*/
});
}
I need to do parallax scrolling on window scroll and also on navigation click..
In navigation click page is animating on top to show target.
How to get window scroll unit on click when page is animating to top for target position.
/*with this code i am trying to get window scroll unit */
$glob(document).ready(function() {
$glob("#lookbook_navi a").bind("click",function(event){
event.preventDefault();
var target = $glob(this).attr("href");
var objWindow = $glob(window);
$window = $glob(window);
alert($window.scrollTop());
$glob("#page").animate({
"top": -($glob(target).position().top)
}, animSpeed);
});
});
/With this code i am getting unit of window scrolling../
$glob(document).ready(function(){
// Cache the Window object
$window = $glob(window);
$glob('div[data-type="lookBookTab"]').each(function(){
var $bgobj = $glob(this); // assigning the object
$glob(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
Try this one
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = target;
});
});
I got a div that expands on a click, sometimes its at the bottom of the page and its close to the bottom. What i want is that when its close to the bottom that it should scroll down just below it.
My solution so far is below. I get how to calculate the values and animate an all but i just dont get why my script wants to scroll to the bottom of the page, it just slams it to the bottom. Any ideas?
EDIT
Doh ofcause its gone scroll to the bottom. Question is how do i scroll so its just below my div by 10px? Im not suppose to say scrollTop: total
jquery
var $ediv = $this.parent('div').find('.order-expand-row');
var hDiv = $ediv.outerHeight();
var oDiv = $ediv.offset().top;
var wHeight = $(window).height();
var total = hDiv + oDiv + 10;
if (total >= wHeight) {
$('html, body').animate({ scrollTop: total }, 600);
}
Well a cup of tea can do magic ;)
solved it by subtracting the wHeight from total, that got me the value i need to scroll to.
To clear it, what I needed was the position where i wanted to scroll to stop not where it should scroll to.
var $ediv = $this.parent('div').find('.order-expand-row');
var hDiv = $ediv.outerHeight();
var oDiv = $ediv.offset().top;
var wHeight = $(window).height();
var total = hDiv + oDiv + 10;
var scrollTo = total - wHeight; //the scroll position
if (total >= wHeight) {
$('html, body').animate({ scrollTop: scrollTo }, 600);
}