Service Portal: floating button overlaps footer

yundlu316 · ‎06-08-2020

Our team has a requirement to develop a floating button (much like the virtual chat) and we've done so after following this pretty simple HTML/CSS tutorial. The button looks great and functions correctly, except that when a user scrolls all the way to the bottom of the page, the bottom appears in the footer. Ideally we would want the floating button to be position fixed 40px from the right and 40px from the bottom until it reaches the footer. Once a user scrolls to the footer, the button should not overlap with the footer, but instead stay 40px above the footer. We found some solutions on stackoverflow, but it would require jquery and I don't believe there's a way to use jquery on page level CSS. Are there any ideas on how we can accomplish this?

ChrisBurks · ‎06-12-2020

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.

View solution in original post

ChrisBurks · ‎06-08-2020

Once the page is loaded you could be able to use jquery in any widget (preferably in the link function and more than likely in the footer widget) to manipulate the desired floating button.

yundlu316 · ‎06-09-2020

Hey @ChrisBurks , do you have an example of this? Our team has actually never coded in link function before. Thanks!

ChrisBurks · ‎06-10-2020

The Link function is used in the same way as the controller except the arguments it gets would be passed in from the controller. AngularJS has a built-in jQuery subset so you can just use it: ie

Link:

function(scope,element,attrs,controller){
   scope.scrollElement = $('scroll-element-selector');
   scope.floatButton = $('float-button-selector');
   //the angular equivalent is angular.element('float-button-selector');

}

- scope gives you access to $scope
- element gives you access to the element where controller is set
- attrs gives you access to attributes on the element where controller is set
- controller gives you access to the controller

You still have access to the full page and can use jquery lite $("selector") to find the element you need to watch/listen or modified. The only issue is timing. How do you know when the directive containing the element you need is loaded?

It depends on when the element being scrolled and the element you need to modify is loaded. But if your script for manipulating the float button is within the same widget/directive then you shouldn't need to worry about timing.

The Service Portal widget is an AngularJS directive. For more info on the link function: AngularJS directives

jQuery lite: AngularJS jQuery lite

ChrisBurks · ‎06-10-2020

Here is a crude mockup:

Link script:

function link(scope, element, attrs, controller) { 
	$('section.sp-scroll').bind('scroll',function(evt){
		var footerEl = $('#footer-con');
		if(this.scrollTop > (this.scrollTopMax - footerEl.height())){
			var footerHeight = footerEl.height();
			var floatBottom = $('.float');
			$('.float').css({"bottom": footerHeight + (footerHeight * .4) });
		}else{
			$('.float').css({"bottom":"40px"});
		}
			
	});
	
	
}