jquery - 创建自定义的响应式网站导航栏/菜单

Question

我为我正在处理的站点创建了一个水平固定导航栏。我正在努力解决一些细节问题。我读过 bootstrap 可以做这些事情，但我试图将它实现到一个有很多自己的 CSS 的网站中，结果一团糟。如有必要，我愿意使用 jquery。

1. 我希望导航栏固定在页面顶部，并横跨页面的整个宽度。到目前为止，一切顺利。

2. 我希望导航栏的不透明度(可能还有颜色)在用户开始滚动时发生变化。 (不那么透明。)

3. 我希望站点 Logo 左对齐，几个导航按钮右对齐，并且我希望按钮和 Logo 能够根据屏幕尺寸进行响应缩放。我不希望左右对齐的元素触及页面边缘。我想要一些填充物。

我还没有找到一种方法来实现不透明度更改，或者将 Logo 和按钮保持在原位并正确缩放。

我有什么，HTML:

<div id="navbar">
     <ul>
<li><a href="index.html"><img src="logo.png" align="left"></a></li>
<li><a href="#1"><img src="button1.png"></a></li>
<li><a href="#2"><img src="button1.png"></a></li>
<li><a href="#3"><img src="button1.png"></a></li>
    </ul>
</div>

和 CSS:

#navbar ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: right;
}

#navbar ul li {
display: inline;
text-decoration: none;
}

#navbar {
position:fixed;
width:100%;
height:40px;
background:rgba(0, 0, 0, 0.6);
text-decoration:none;
margin:0px;
padding-left:500px;
padding-right:500px;
padding-top:8px;
top:0;
word-spacing:40px;
}

有什么想法吗？

Answer 1

使用jquery

$(window).resize(function(){
    if(window.innerWidth > 768) 
    {
 //add sheet external css
 //$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
 //Remove the entire style attribute:
 //$("#nav").removeAttr("style");
 //add css
 /*$("#voltaic_holder").css(
         {"position":"relative", 
          "top":"10px",
          "width": "500px";
         });
  */
    }
    else if(window.innerWidth > 1000) 
    {
    }
    else if(window.innerWidth > 1200) 
    {
    }
    else(window.innerWidth > 2000) 
    {
    }
});

或者使用简单的 CSS

@media all and (max-width: 800px) {
  .class {
    width: 200px;
    }
}

@media all and (min-width: 600px) {
  .class { 
         width: 100px; 
         }
}