Sticky headers in Bootstrap from ExtLib

I received a request from a customer who would like to preserve the action buttons on an xpage when the user scrolls downs a very long form.

The application is already using the BS theme from the Extension Library with the sticky navbar option in use so this would implement a second ‘sticky element’.

Here is an example how the xpage looks like:

Note: I added some Lorem Ipsum content in stead of form elements for demo purpose, but you get the idea of a endless form to fill in.

So first I added a listener for the scroll event:

window.onscroll = function() {scrollFunction()};

The scrollFunction is as followed:

function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
console.log('make SMALL')
$('.navbar').css({
'min-height': '32px',
'height': '32px'
});
$('.navbar-brand').css({
'height': '32px',
'padding-top': '5px',
'padding-bottom': '5px'
});
$('.navbar-nav > li > a').css({
'padding-top': '5px',
'padding-bottom': '5px'
});
$('#infoLanguage > div.dropdown').css({
'padding': '5px 5px'
});
$('#form-header').css({
'display': 'block',
'z-index': '-1'
});
$('#form-header-hidden').css({
'display': 'block',
'position': 'fixed',
'top': '30px',
'height': '30px',
'z-index': '996'
});
$('navbar').addClass('shrink');
} else {
console.log('make LARGE')
$('.navbar').css({
'min-height': '50px',
'height': '50px'
});
$('.navbar-brand').css({
'height': '50px',
'padding-top': '15px',
'padding-bottom': '15px'
});
$('.navbar-nav > li > a').css({
'padding-top': '15px',
'padding-bottom': '15px'
});
$('#infoLanguage > div.dropdown').css({
'padding': '15px 10px'
});
$('#form-header').css({
'display': 'block'
});
$('#form-header-hidden').css({
'display': 'none',
'position': 'fixed',
'top': '0px',
'height': '30px',
'z-index': '0'
});
$('navbar').removeClass('shrink');
}
}

I also added some additional styling for style and transition effects:

<style> 
	#form-header-hidden{ 
	width:100%; 
	background-color:white; 
	height:0px; 
	padding:5px 150px; 
	box-shadow: 0px 3px 5px 0px rgba(182,182,182,0.75); 
	transition: all 0s, opacity 0.5s linear;
} 

#form-header{ 
	transition: all 0s, opacity 0.5s linear;
}

.navbar{
	transition: all 0.5s;
}
.navbar-brand img{
    transition: all 0.5s;
}
</style>

So I basically make 2 form-header elements, on for ‘normal’ display when focus is on the top and one when the user starts to scroll down from a certain point. The form elements are basically the same but more adapted on the height of their container.

One thing I would like to note is that I had to place the ‘smaller’ sticky header under the navbar so it can inherit the same with as its parent. Otherwise I would look not nice with a bit of displacement.

I also noted a small shaking effect when I would use the visibility option to show/hide which form-header to display. Choosing here to play mess with the z-index property solves that issue with shaking when scrolling slowly in the beginning.

Here is the result when the user starts to scroll down. The form header becomes small but sticky under the navbar. The buttons to interact with the form are available where ever the user is in the form:

A small new feature in the app but I think it will bring a lot of user satisfaction! Happy coding 🙂