如何可以修复定位菜单栏？ [英] How can I make a fix positioned menu bar?

问题描述

我想为我的菜单栏设定样式像THIS 。
当您向下滚动时，它会固定在网站的顶部，并且不会固定在网页加载时的位置。

I would like to style my menu bar Like THIS. It's fixed to the top of the site when you scroll down and it isn't fixed where it is when the page is loaded.

如何

推荐答案

后面是一个粘性导航栏/菜单。

What you're after is a 'sticky navbar/menu'.

最简单的方法是将以下CSS添加到菜单/ navbar

The simplest way would be to add the below CSS to your menu/navbar

position:fixed;
top:0px;

也就是说，如果效果更接近您发布的效果，看看使用一些jQuery，例如：

That said, for an effect closer to the one you've posted, you'll probably want to look at using some jQuery, e.g.:

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 50) {
         $('.menu').addClass('fixed');
     }
     else {
         $('.menu').removeClass('fixed');
     }
});

这样做是当你滚过页面时，将菜单栏修复到页面顶部元素添加CSS类'fixed'到某个点（例如50px），固定类将简单地为例如

What this does is 'fix' the menu bar to the top of the page once you scroll past a certain point (e.g. 50px) by adding the CSS class 'fixed' to the .menu element, the fixed class would simply be e.g. the CSS above.

列出了一些不错的例子这里。

There are some nice examples listed here.

这篇关于如何可以修复定位菜单栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！