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
Related
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
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'm working on a parallax page using Stellar.js, I have some parallax panes stacked to each other like this:
I want a smooth scroll-to-top for each pane when user scroll down the page and reached that pane.
I mean I want the scroller be smart enough to align each pane to the top of screen.
I tried this but didn't work:
h = $(window).height();
t = $('#parallaxtop').offset().top + $('#parallaxtop').height();
if(t > h) {
$(window).scrollTop(t - h);
}
And here is the JSFiddle:
http://jsfiddle.net/LDaUw/
I've found this working:
var pageH = $(window).innerHeight(); //grab window height
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
var eTop = $('#parallaxtop').offset().top; //get the offset top of the element
var myOffset = eTop - $(window).scrollTop(); //determine the offset from window
if (myOffset > -100 && myOffset < pageH/2) { //if the offset is less than the half of page scroll to the panel
$('#parallaxtop').ScrollTo({ //ScrollTo JQuery plugin
});
}
}, 250)); //this will be calculated 250ms after finishing every scroll
});
I've used the ScrollTo JQuery plugin for smooth scrolling.
I have a sort of sidebar on my website, which has to scroll down together with the user so that it is always in the view.
The code I'm using now is actually working fine however there is one problem. On smaller screens the sidebar scrolls before your at the sidebar thus making it impossible to see it all even if you scroll.
So what I want is the sidebar to scroll with the bottom instead of it being pushed down with the top so that when you reach the end of the sidebar it starts to scroll.
This is the code that I'm currently using.
var documentHeight = 0;
var topPadding = 10;
$(function() {
var offset = $("#mainright").offset();
documentHeight = $(document).height();
$(window).scroll(function() {
var sideBarHeight = $("#mainright").height();
if ($(window).scrollTop() > offset.top) {
var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
var maxPosition = documentHeight - (sideBarHeight);
if (newPosition > maxPosition) {
newPosition = maxPosition;
}
$("#mainright").stop().animate({
marginTop: newPosition
});
} else {
$("#mainright").stop().animate({
marginTop: 0
});
};
});
});
I guess the "best practice" for accomplishing a task like this is to use dynamically changing css position from absolute to fixed and vice versa. A basic example could look like:
$(function(){
var $box = $('.box'),
offset = $box.offset(),
doc_h = $(document).height();
$(window).scroll(function(){
if($(window).scrollTop() > offset.top) {
if(!$box.hasClass('fix'))
$box.toggleClass('normal fix');
}
else{
if(!$box.hasClass('normal'))
$box.toggleClass('normal fix');
}
});
});
Example in action: http://www.jsfiddle.net/YjC6y/14/
$(function() {
var top = 50;
$(window).scroll(function() {
$('#box').stop().animate({ top: $(window).scrollTop() + top}, 1000);
});
});
Try the example : http://jsbin.com/omiyi3
I think you can instead make the sidebar responsive by throwing your function into one of these:
if (responsive_viewport >= 768) {}
This makes it so that the function will only load if the viewport is bigger than or equal to 768px.