I have this code which works fine, but when i scroll down, my div is reaching the footer and dont stop. How can I stop scrolling with page at certain point?
(function($) {
var element = $('#div'),
originalY = element.offset().top;
var topMargin = 20;
element.css('position', 'relative');
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 300);
});
})(jQuery);
You can use multiple multiple ternary operator to define which position do you want to stop at. This example have 2 point of stop, between stopTop 1 and stopTop 2. If scrollTop reach the stopTop1 then it will freeze on that position until scroll top pass the stopTop2 :
top : scrollTop < originalY
? 0
: scrollTop > stopTop1 && scrollTop < stopTop2
? stopTop1
: scrollTop - originalY + topMargin
Here the the code that you can try :
myjsfiddle
Related
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
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 am implementing my own horizontal scrolling with controls (left/right)
How can I find how much scrolling I got to the right?
My code is as follows:
$scope.scrollFilters = function(dir) {
var leftPos = $('.filters').scrollLeft();
var containerWidth = $('.filters').width();
var scrollTo = 0;
if (dir == 'right') {
scrollTo = leftPos + scrolled >= containerWidth ? containerWidth : leftPos + scrolled;
} else {
scrollTo = leftPos - scrolled <= 0 ? 0 : leftPos - scrolled;
}
$('.filters').animate({
scrollLeft: scrollTo
});
};
What I'm interested in is getting the actual $('.filters').width(). At the moment it would just return the width I set up in the CSS, I want to get the actual width if I wouldn't limit the div in width.
P.S. its an AngularJS application, but don't think it does me any good this time.
Thanks for the help!
you should try and grab its max width
var theWidth = Math.max.apply(null, $(".filters").map(function() {
return $(this).outerWidth(true);
}).get());
If there is scroll, it means that an inner element is bigger than an outer element, so you should calculate the difference between the inner width (bigger) and the outer width (smaller) or their heights.
This may help you as you have to apply the same concept: How to get maximum document scrolltop value
Trying to create a scrolling div. Wanted to stop (thescrollingdiv) div once it has reached a particular top position and scrolled all the way to the bottom and not overshoot the parent div into infinity scrolling zone. thescrollingdiv does not have any height specified but its parent div does.Thanks.
$('#div a).click(function(e){
e.preventDefault();
$('#thescrollingdiv').stop(true,true).animate({ "top": '-=100px'}, 500)
ScrollTop tells you where you are at. Check the existing top against scrolltop and work the math to set your limits.
var scrollTop = $('#thescrollingdiv').scrollTop();
var newTop = parseFloat($('#thescrollingdiv').css('top')) - 100;
if (scrollTop < 0) {
newTop = 0;
}
$('#thescrollingdiv').stop(true,true).animate({ "top": newTop}, 500)
UPDATE
Something like this.
var topLimit = 0;
var bottomLimit = 800;
var containerTop = parseFloat($('container').css('top'));
var containerBottom = parseFloat($('container').css('height')) + containerTop;
var destination = containerTop - 100;
// compensate for going too far up
destination = (destination < 0) ? 0 : destination;
// compensate for going too far up
destination = (containerBottom > bottomLimit) ? bottomLimit : destination;
// now that you know you are within your custom limits, animate it.
animate(destination);
This is almost pseudo code as I don't know what your code looks like, but it gives you an idea. You have to actually DO THE WORK in setting the limits for your 'newTop', before you call animate in the first place.
You can figure it out. Don't be a lazy programmer, though.