Fixed menu when scrolling the page jquery plugin. Fixed top menu and floating sidebar in WordPress. As always, let's start with HTML markup
TaskSet the position of a block element so that it always remains in the same place when scrolling the page.
Solution“Freezing” an element in a certain place on a web page is done using the style property position with the value fixed . In this case, the position of the element does not change even when scrolling the page using scrolling. The coordinates themselves are specified through the properties left , right , top and bottom , which respectively determine the position from the left, right, top and bottom edges of the browser window (example 1).
Example 1: Using position
HTML5 CSS 2.1 IE Cr Op Sa Fx
Fixed menu .menu ( position: fixed; /* Fixed position */ right: 10px; /* Distance from the right edge of the browser window */ top: 20%; /* Top distance */ padding: 10px; /* Margins around text * / background: #ffe; /* Background color */ border: 1px solid #333; /* Border options */ .text ( height: 1000px; ) Menu
Result this example shown in Fig. 1. Please note that the position of the element does not change when you scroll down the page.
Very often, on sites with a lot of content, the visitor gets lost on the page and has to scroll to the very top of the page to find the navigation menu. Technologies do not stand still, monitor screens and their resolutions are becoming larger, so now on a website it is no longer a pity to allocate 40 pixels on top for a fixed menu when scrolling a website page. The visitor will be able to always see which section he is in, and also have fast access to the navigation menu. Ultimately, this increases the depth of browsing the site :)
What is the essence of a fixed navigation menu on a website? Initially, our menu is located in its usual place, somewhere in the header, in my case at a distance of 140px from the top edge. As soon as the visitor scrolls the page by these same 140px at the bottom, the menu is fixed at the very top of the window and remains there for the rest of the time until the scroll is returned to the top position.
A fixed menu when scrolling a page is essentially a control panel that is always with you. Our menu will be simple.
From theory to practice. Everything is quite simple and minimalistic, most of which is given to styles that you can customize for yourself. I made a fixed menu as in the picture; when scrolled, the color of the menu becomes slightly transparent so that it does not look heavy and the content underneath is visible.
Our styles. I have a menu with a width of 1180px, located in the center. The header is 180px high, the scrolling menu is included in it and takes up 40px. This means the distance from the top 140px. Let's remember this number)
#header ( height: 180px; ) #navigation( background: #EF0505; height: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); font-size: 16px; line-height: 40px; position: relative; top: 140px; ) #navigation.fixed( position: fixed; top: 0; width: 100%; background: rgba(239, 5, 5, 0.95); ) #navigation ul( width: 1180px; padding -left: 0; margin: 0 auto; display: block; ) #menu li( float: left; list-style: none; padding: 0 25px; border-right: 1px solid #D60000; ) #menu a ( color: #fff; text-decoration: none; font-family: Verdana; ) #menu>li a:hover( color: #656565; transition: color 0.5s ease; )
And here are the few lines of code that work the magic) We set the conditions for scrolling the page, above 140px or below. Depending on this, the fixed class is assigned to our navigation menu. And with this class, as stated above, we make the menu fixed and pinned to the top.
JQuery(function($) ( $(window).scroll(function())( if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) else if ($(this).scrollTop()
