On many webs we often see the use of ‘position:fixed’ to keep an element visible the whole time in spite of the page scrolling. For example, we can see that effect on Privalia’s web, where the navigation menu is always in sight. The problem with ‘position:fixed’ is that most times it needs JavaScript help to get the effect we generally wish. Regarding Privalia, the element with ‘position:fixed’ is kept fixed to viewport but in relation to a parent element in order not to cover up the header or the footer, something which has to be done with JavaScript.
It is because of this that I think it would be interesting to propose a change in the specification, so that ‘position:fixed’ gains position and dimensions relating to the immediate parent element with ‘position:relative’, keeping its position within the viewport area.
In the next example, we see the normal flow of ‘position:fixed’ without the JavaScript support, in which the element with ‘position:fixed’ is always in the same position with respect to the viewport when moving the example’s scrolls. In this example the relevant part of the code is only the CSS of the fixed element.
|
1 2 3 4 5 |
.fixed{ position: fixed; top:100px; width: 80px } |
The two problems with this CSS, with respect to the lay out problem, is that as much the top position as the width dimension are relating to the viewport and not to a parent element, that is why we can not get an effect of a fixed element with respect to the parent element. The element is always in the same position with respect to the viewport and we cannot interact more with it.
[/vc_column_text]
In the next example, we have used JavaScript to get the wished effect on the element with ‘position:fixed’. The element is kept visible in the viewport but within the area of the parent element. So that when the parent element gets out of the viewport, the element with ‘position:fixed’ also goes out together with it. We can compare the behavior of both examples by moving the vertical and horizontal scroll bars. In many cases we usually forget the horizontal scroll bar, as in the case of Privalia. Besides the position, the width of the element with ‘position:fixed’ has to be taken into account when the parent has a percentage width.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
$(document).ready(function(){ var top,bottom, y, page; var left = $('.tofix').offset().left; tofixwidth(); $(window).scroll(function (event) { // what the y position of the scroll is controlArticlePositions(); // whether that's below the form if (y >= top && y<=bottom && y > page) { $('.tofix').addClass('fixed'); //control horizontal scroll tofixl = left-x; $('.tofix').css('left', tofixl); } else { $('.tofix').removeClass('fixed'); } }); $(window).resize(function() { tofixwidth(); }); function controlArticlePositions(){ page = $('.page').offset().top; pageb = $('.tofix').height(); top = $('.tofix').offset().top; bottom = page + $('.page').height() - pageb; y = $(window).scrollTop(); x = $(window).scrollLeft(); } function tofixwidth(){ $('.tofix').css('width', ''); var sidebarW = $('.tofix').closest('.sidebar').css('width'); $('.tofix').css('width', sidebarW); } }); |
