In my container there are sections/boxes, but the last one of these boxes should follow scrolling when none of the other boxes are visible.
So, when user scrolls down, he sees a normal sidebar, but when user has went down enough, sidebar ends but the last box starts to follow on the top of the screen. I have seen this a lot on different kind of sites.
My code at the moment:
$(window).scroll(function(){
$.each($('.follow-scroll'),function(){
var eloffset = $(this).offset();
var windowpos = $(window).scrollTop();
if(windowpos<eloffset.top) {
var finaldestination = 0;
} else {
var finaldestination = windowpos;
}
$(this).stop().animate({'top':finaldestination},200);
});
});
Here is mine solution (hope it is plug-n-play enough too):
// SlideAlongScroll_x000D_
var SlideAlongScroll = function(el) {_x000D_
var _this = this;_x000D_
this.el = el;_x000D_
// elements original position_x000D_
this.elpos_original = el.parent().offset().top; _x000D_
// scroller timeout_x000D_
this.scroller_timeout;_x000D_
// scroller calculate function_x000D_
this.scroll = function() {_x000D_
// 20px gap for beauty_x000D_
var windowpos = $(window).scrollTop() + 20;_x000D_
// targeted destination_x000D_
var finaldestination = windowpos - this.elpos_original;_x000D_
// define stopper object and correction amount_x000D_
var stopper = ($('.footer').offset().top); // $(window).height() if you dont need it_x000D_
var stophere = stopper - el.outerHeight() - this.elpos_original - 20;_x000D_
// decide what to do_x000D_
var realdestination = 0;_x000D_
if(windowpos > this.elpos_original) {_x000D_
if(finaldestination >= stophere) {_x000D_
realdestination = stophere;_x000D_
} else {_x000D_
realdestination = finaldestination;_x000D_
}_x000D_
}_x000D_
el.css({'top': realdestination });_x000D_
};_x000D_
// scroll listener_x000D_
$(window).on('scroll', function() {_x000D_
// debounce it_x000D_
clearTimeout(_this.scroller_timeout);_x000D_
// set scroll calculation timeout_x000D_
_this.scroller_timeout = setTimeout(function() { _this.scroll(); }, 300);_x000D_
});_x000D_
// initial position (in case page is pre-scrolled by browser after load)_x000D_
this.scroll();_x000D_
};_x000D_
// init action, little timeout for smoothness_x000D_
$(document).ready(function() {_x000D_
$('.slide-along-scroll').each(function(i, el) {_x000D_
setTimeout(function(el) { new SlideAlongScroll(el); }, 300, $(el));_x000D_
});_x000D_
});/* part you need */_x000D_
.slide-along-scroll {_x000D_
padding: 20px;_x000D_
background-color: #CCCCCC;_x000D_
transition: top 300ms ease-out;_x000D_
position: relative;_x000D_
}_x000D_
/* just demo */_x000D_
div { _x000D_
box-sizing: border-box;_x000D_
}_x000D_
.side-column {_x000D_
float: left;_x000D_
width: 20%; _x000D_
}_x000D_
.main-column {_x000D_
padding: 20px;_x000D_
float: right;_x000D_
width: 75%;_x000D_
min-height: 1200px;_x000D_
background-color: #EEEEEE;_x000D_
}_x000D_
.body { _x000D_
padding: 20px 0; _x000D_
}_x000D_
.body:after {_x000D_
content: ' ';_x000D_
clear: both;_x000D_
display: table;_x000D_
}_x000D_
.header {_x000D_
padding: 20px;_x000D_
text-align: center;_x000D_
border-bottom: 2px solid #CCCCCC; _x000D_
}_x000D_
.footer {_x000D_
padding: 20px;_x000D_
border-top: 2px solid #CCCCCC;_x000D_
min-height: 300px;_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div>_x000D_
<div class="header">_x000D_
<h1>Your super-duper website</h1>_x000D_
</div>_x000D_
<div class="body"> _x000D_
<div class="side-column">_x000D_
<!-- part you need -->_x000D_
<div class="slide-along-scroll">_x000D_
Side menu content_x000D_
<ul>_x000D_
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>_x000D_
<li>Aliquam tincidunt mauris eu risus.</li>_x000D_
<li>Vestibulum auctor dapibus neque.</li>_x000D_
</ul> _x000D_
</div>_x000D_
</div>_x000D_
<div class="main-column">_x000D_
Main content area (1200px)_x000D_
</div>_x000D_
</div>_x000D_
<div class="footer">_x000D_
Footer (slide along is limited by it)_x000D_
</div>_x000D_
</div>This is my final code .... (based on previous fixes, thank you big time for headstart, saved a lot of time experimenting). What bugged me was scrolling up, as well as scrolling down ... :)
it always makes me wonder how jquery can be elegant!!!
$(document).ready(function(){
//run once
var el=$('#scrolldiv');
var originalelpos=el.offset().top; // take it where it originally is on the page
//run on scroll
$(window).scroll(function(){
var el = $('#scrolldiv'); // important! (local)
var elpos = el.offset().top; // take current situation
var windowpos = $(window).scrollTop();
var finaldestination = windowpos+originalelpos;
el.stop().animate({'top':finaldestination},500);
});
});
That code doesn't work very well i fixed it a little bit
var el = $('.caja-pago');
var elpos_original = el.offset().top;
$(window).scroll(function(){
var elpos = el.offset().top;
var windowpos = $(window).scrollTop();
var finaldestination = windowpos;
if(windowpos<elpos_original) {
finaldestination = elpos_original;
el.stop().animate({'top':400},500);
} else {
el.stop().animate({'top':windowpos+10},500);
}
});
There's a fantastic jQuery tutorial for this at https://web.archive.org/web/20121012171851/http://jqueryfordesigners.com/fixed-floating-elements/.
It replicates the Apple.com shopping cart type of sidebar scrolling. The Google query that might have served you well is "fixed floating sidebar".
I needed the div to stop when it reach a certain object, so i did it like this:
var el = $('#followdeal');
var elpos_original = el.offset().top;
$(window).scroll(function(){
var elpos = el.offset().top;
var windowpos = $(window).scrollTop();
var finaldestination = windowpos;
var stophere = ( $('#filtering').offset().top ) - 170;
if(windowpos<elpos_original || windowpos>=stophere) {
finaldestination = elpos_original;
el.stop().animate({'top':10});
} else {
el.stop().animate({'top':finaldestination-elpos_original+10},500);
}
});
I wrote a relatively simple answer for this.
I have a table that's using one of the "sticky table header" plugins to stick right below a particular div on my page, but the menu to the left of the table didn't stick (as it's not part of the table.)
For my purposes, I knew the div that needed "stickiness" was always going to start at 385 pixels below the top of the window, so I created an empty div right above that:
<div id="stopMenu" class="stopMenu"></div>
Then ran this:
$(window).scroll(function(){
if ( $(window).scrollTop() > 385 ) {
extraPadding = $(window).scrollTop() - 385;
$('#stopMenu').css( "padding-top", extraPadding );
} else {
$('#stopMenu').css( "padding-top", "0" );
}
});
As the user scrolls, it adds whatever the value of $(window).scrollTop() is to the integer 385, then adds that value to the stopMenu div that's above the thing I want to stay focused.
In the event the user scrolls all the way back up, I just set the extra padding to 0.
This doesn't require the user to do anything IN CSS particularly, but it's kind of a nice effect to make a small delay, so I put the class="stopMenu" in as well:
.stopMenu {
.transition: all 0.1s;
}
This one is same on facebook:
<script>_x000D_
var valX = $(window).scrollTop();_x000D_
function syncScroll(target){_x000D_
var valY = $(window).scrollTop();_x000D_
var difYX = valY - valX;_x000D_
var targetX = $(target).scrollTop();_x000D_
if(valY > valX){_x000D_
$(target).scrollTop(difYX);_x000D_
}_x000D_
if(difYX <= 0){_x000D_
$(target).scrollTop(-20);_x000D_
}_x000D_
}_x000D_
_x000D_
$(window).scroll(function(){_x000D_
syncScroll('#demo');_x000D_
})_x000D_
</script>body{_x000D_
margin:0;_x000D_
padding:0;_x000D_
height:100%;_x000D_
}_x000D_
#demo{_x000D_
position:fixed;_x000D_
height:100vh;_x000D_
overflow:hidden;_x000D_
width:40%;_x000D_
}_x000D_
#content{_x000D_
position:relative;_x000D_
float:right;_x000D_
width:60%;_x000D_
color:red; _x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<body>_x000D_
<div id="demo">_x000D_
<ul>_x000D_
<li>_x000D_
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>_x000D_
</li>_x000D_
<li>_x000D_
<p>_x000D_
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"_x000D_
</p>_x000D_
</li> _x000D_
<li>_x000D_
<p>_x000D_
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"_x000D_
</p>_x000D_
</li>_x000D_
<ul>_x000D_
</div>_x000D_
<div id="content">_x000D_
<ul>_x000D_
<li>_x000D_
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>_x000D_
</li>_x000D_
<li>_x000D_
<p>_x000D_
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"_x000D_
</p>_x000D_
</li> _x000D_
<li>_x000D_
<p>_x000D_
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"_x000D_
</p>_x000D_
</li>_x000D_
<li>_x000D_
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>_x000D_
</li>_x000D_
<li>_x000D_
<p>_x000D_
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"_x000D_
</p>_x000D_
</li> _x000D_
<li>_x000D_
<p>_x000D_
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"_x000D_
</p>_x000D_
</li>_x000D_
<li>_x000D_
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>_x000D_
</li>_x000D_
<li>_x000D_
<p>_x000D_
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"_x000D_
</p>_x000D_
</li> _x000D_
<li>_x000D_
<p>_x000D_
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"_x000D_
</p>_x000D_
</li>_x000D_
<li>_x000D_
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>_x000D_
</li>_x000D_
<li>_x000D_
<p>_x000D_
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"_x000D_
</p>_x000D_
</li> _x000D_
<li>_x000D_
<p>_x000D_
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"_x000D_
</p>_x000D_
</li>_x000D_
<ul>_x000D_
</div> _x000D_
</bodyThe solution can be boiled down to this:
var el=$('#follow-scroll');
var elpos=el.offset().top;
$(window).scroll(function () {
var y=$(this).scrollTop();
if(y<elpos){el.stop().animate({'top':0},500);}
else{el.stop().animate({'top':y-elpos},500);}
});
I have changed the assignment of el because finding a single element by class is not a great habit to get in to; if you only want one element find it by id, if you want to iterate over a collection of elements then find them by class.
please note - my answer here refers to the accepted answer at that time (it still is the accepted answer at the moment, but has since been edited and therefore my answer no longer "boils down" what you see in @Martti Lane's answer on this page; my answer "boils down" his original, accepted, answer; you can take a look at the edit history of @Martti's answer if you're interested in what I "boiled down".)
This worked for me like a charm.
JavaScript:
$(function() { //doc ready
if (!($.browser == "msie" && $.browser.version < 7)) {
var target = "#floating", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));
$(window).scroll(function(event) {
if (top <= $(this).scrollTop()) {
$(target).addClass("fixed");
} else {
$(target).removeClass("fixed");
}
});
}
});
CSS:
#floating.fixed{
position:fixed;
top:0;
}
Source: http://jqueryfordesigners.com/fixed-floating-elements/
Source: Stackoverflow.com