问题
Javascript make sidebar "scroll" with the page until its bottom edge hits footer. The point is that I have this sidebar that should scroll along with the page and stop when its bottom edge hits the top edge of footer - after that point it should behave by default(be static again), which can be seen here: http://zakuvavanje.rs/ . This question is similar to this one jQuery scrolling DIV: stop scrolling when DIV reaches footer , I didn't want to ask the question, however I had no idea how to make it happen, the script should go where I put
console.log('now the script should start');
P.S. the problem is for smaller screens so please set viewport to 1366x768 or less to see the issue. Here's the pastebin for my script: http://pastebin.com/8anjKR1d , and here's the same script here:
//"fixed" sidebar
function scrollingAside() {
var $aside = $('.aside'),
asideH = $aside.outerHeight(),
asideTop = $aside.offset().top,
docH = $(document).height(),
asideOfsB = docH - asideTop - asideH,
footerH = $('.footer').outerHeight(),
wScrollTop = $(window).scrollTop(),
wHeight = $(window).height(),
scrollBtm = docH - wScrollTop - wHeight;
function stopAsideScroll() {
if ( asideOfsB < footerH + 2 ) {
console.log('now the script should start');
} //end if
} //stopAsideScroll
//if screen is wide enough so that the sidebar is there
if( $(window).width() > 840 ) {
if( wScrollTop > 376 ) {
$aside.css({ 'transform' : 'translateY('+ (wScrollTop - 376) +'px)' });
//stop scrolling if it reaches footer
stopAsideScroll();
} else {
$aside.css({ 'transform' : 'translateY(0)' });
}
//if screen is smaller disable
} else {
$aside.css({ 'transform' : 'translateY(0)' });
}
} //scr aside
Thanks in advance for whoever fixes this for me!!! :)
来源:https://stackoverflow.com/questions/39436074/javascript-make-sidebar-scroll-with-the-page-until-its-bottom-edge-hits-footer