Hi @yundlu316 ,
Yeah, sorry about that, scrollTopMax is a firefox (Mozilla) thing. It lets you know the maximum scroll an element can do.
I modified the script to this:
function link(scope, element, attrs, controller) {
//element that is actually scrolling
$('section.sp-scroll').bind('scroll',function(evt){
//footer element
var footerEl = $('#footer-con');
//if the current scroll position is greater than its calculated value of its scrollHeight minus its height minus the footers height
if(this.scrollTop > (this.scrollHeight - this.offsetHeight - footerEl[0].scrollHeight)){
var footerHeight = footerEl.height();
var floatBottom = $('.float');
//set position of the button with an additional 40% (based off it's current 40px)
$('.float').css({"bottom": footerHeight + (footerHeight * .4) });
}else{
$('.float').css({"bottom":"40px"});
}
});
}
I really didn't expect you to use my script as I stated it's a rough mock and could be improved on so that it's not so choppy. I just wanted to show that it's possible to manipulate other elements even if their styles are set in some other place.
I can't really answer your question about what's going on with $(window) vs $(document) height being the same. But I can say this, when listening to the scroll event you'll want to listen to the actual element that is scrolling.
As you can see in my example I'm binding to a section element and not window or document because both of their scrollTop would continue to be zero. In this case those elements aren't scrolling.
.scrollTop, .scrollHeight, .offsetHeight are all attributes of an html element.
Hopefully that helps.
