How to create a scroll bar with fixed navigation and left and right sliding using CSS

As shown above, the navigation is fixed at the top and you can slide left and right to click on more options.

This is a fairly simple production, and this article only mentions a few points:

Fixed position

The menu is fixed at the top and does not move. Use position:fixed; top:0; left:0;. Also note:

• Move the list below down to the corresponding position, otherwise part of the list below will be covered when the page is opened.
• Set the background for the menu. Otherwise, if it is transparent, it will overlap with the content scrolling up from the list below.
• Set the background for the body. Since the WeChat browser has a default background color (not white), it may conflict with our effect. Set the background as needed.

Using table

Usually we use ul and li for float, but when one row cannot be displayed, it is troublesome to prevent it from falling to the second row, so we recommend using table.

The following is the entire CSS code, where .wrapper is the outer layer, and .nav and .list are brothers.

body, .wrapper 
{ 
background:#fff; 
}

.nav 
{ 
position:fixed; 
top:0;
 left:0; padding:0; 
width:100%; 
height:60px; 
overflow-x:scroll; 
background:#fff; 
}
.nav table 
{ 
width:720px;
 border-collapse:collapse;
 }
.nav table td 
{
 padding-top:10px; 
padding-bottom:10px; 
width:80px; 
text-align:center; 
}
.nav table td a 
{ 
line-height:40px; 
font-size:14px; 
font-weight:bold; 
}
.nav table td.cur a 
{ 
box-sizing:border-box; 
border-bottom:2px solid #f07515; color:#f07515; 
}

.list 
{ 
margin-top:60px; 
}

Dynamically limited width

The above CSS code sets the table to 720px, which is the width of 9 tds. Usually, the number of menus is fixed, so we just set it like this. But if it is not fixed, we can use the program to set it dynamically, such as the JavaScript setting method:

$(".header table").width($(".header table td").length * $(".header table td").width());

When the next menu item is selected, the next menu item is displayed

For non-Ajax pages, when you click the menu page behind, the page refreshes and then displays the leftmost menu items. We can use JavaScript to scroll the menu items so that the currently selected item is displayed. The sample code is as follows:

var count = 0;
$(".header table td").each(function () {
	if ($(this).hasClass("cur")) {
		return false;
	}
	count++;
});
if (count >= 3) { // Do not scroll when the first few are selected count -= 2; // No need to scroll to the far left $(".header").get(0).scrollLeft = count * $(".header table td").width();
}

Summarize

This is the end of this article about how to create a fixed navigation and left and right sliding scroll bar with CSS. For more relevant CSS navigation fixed left and right sliding scroll bar content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!