Html 导航栏没有'；向下滚动时，t会改变颜色_Html_Css_Twitter Bootstrap

Html 导航栏没有'；向下滚动时，t会改变颜色

html css twitter-bootstrap

Html 导航栏没有'；向下滚动时，t会改变颜色,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,即使相同的代码在codepen上运行良好，但在本地文件上却无法运行。导航栏在顶部时应该是透明的，但在向下滚动时应该变成黑色。我怀疑这可能是我链接引导和其他外部文件的方式，但问题可能在导航栏上代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Silverstein | Law Firm</title> <meta name="viewpo

即使相同的代码在codepen上运行良好，但在本地文件上却无法运行。导航栏在顶部时应该是透明的，但在向下滚动时应该变成黑色。我怀疑这可能是我链接引导和其他外部文件的方式，但问题可能在导航栏上

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Silverstein | Law Firm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!--The Styling Files-->
<link href="costume.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lora|Playfair+Display" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    <a class="navbar-brand" href="#"><img src="https://s2.postimg.org/6ewd0j4yx/logo.png" id="logo"></a> </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav pull-right">
      <li><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#results">Results</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <!-- /.navbar-collapse --> 
</nav>
<!--Jumbotron-->
<div class="jumbotron" id="main-jumb"> <img src="https://s17.postimg.org/54y6cxqzz/background2.jpg" class="jumbotron-image">
  <h1 class="text-center" id="h1central">"it is not wisdom <br>
    but authority that makes a law"</h1>
</div>
<!--End Jambotron--> 
<!--About-->
<div class="container" id="about">
  <div class="row">
    <div class="col-md-6"> <img src="http://www.wcsr.com/~/media/Images/WCSR/Lawyers/Photos/Jeffrey%20T%20Lawyer.png" id="lawyer-pic" class="img-responsive"> </div>
    <div class="col-md-6">
      <p id="p-about"><a name="about" id="about-h"></a>GEORGIOS P. SILVERSTEIN practices in the area of real property litigation, with a particular focus on eminent domain, inverse condemnation, California Environmental Quality Act (CEQA), land use, zoning and planning, Public Records Act, Brown Act, and government and municipal litigation.<br>
        <br>
        Mr. Silverstein graduated magna cum laude from the University of California at Los Angeles in 1990 with a Bachelor of Arts degree in English. He is a member of Phi Beta Kappa.<br>
        <br>
        Mr. Silverstein received his Juris Doctor degree in 1996 from the University of California, Hastings College of the Law. At Hastings, Mr. Silverstein received the American Jurisprudence Award in Legal Writing and Research, and was an Articles Editor of the Hastings International and Comparative Law Review.<br>
        <br>
        Mr. Silverstein is a member of the Litigation Section and Real Property Sections of the California State and Los Angeles County Bar Associations, and is a member of the Eminent Domain and Land Valuation Committee of the Los Angeles County Bar Association.<br>
        <br>
        Mr. Silverstein has been featured in numerous publications regarding his advocacy on behalf of clients, including in the Los Angeles Times and Los Angeles Business Journal. In April 1998, Mr. Silverstein was featured in the Los Angeles Daily Journal and San Francisco Daily Journal in a Litigator Profile and Case In Focus article.</p>
    </div>
  </div>
</div>
<!--End About--> 
<!--Service-->
<div class="container-fluid" id="service">
  <div class="row">
    <div class="col-md-6">
      <p id="p-service"><a name="services" id="services-h"></a>Swift access to high quality and cost effective legal services across Europe, the Americas, Asia, Oceania and the Middle East.<br>
        <br>
        High standard legal consultancy in more than 7 languages (Greek, English, French, German, Italian, Spanish, Russian, Arabic).<br>
        <br>
        Specialism, showcased experience in a wide range of legal disciplines and extensive expertise gained through our involvement with a diverse clientele (major corporations and banks, private and public institutions, business associations, high net worth individuals, government and quasi government bodies).<br>
        <br>
        A well-organized associate’s network, composed by both in-house and external solicitors, notaries, accountants, tax experts, auditors, civil engineers, topographers, translators, realtors, IT consultants, business advisors, possessing the knowledge, the connections and the qualifications to provide an all-in-one package of consultancy services meeting your needs however diverse.<br>
        <br>
        The competitive advantage to work with the latest technology (cloud computing, up-to-date equipment, smart electronic devises, upgraded business solutions software) as a modern business in an increasingly digital economy.<br>
        <br>
      </p>
    </div>
  </div>
</div>
<!--End Service--> 
<!--Results-->
<div class="container" id="quote-container">
  <div class="row">
    <div class="col-md-offset-2 col-md-8">
      <h1 class="text-center" id="h1-results">What our clients say</h1>
    </div>
  </div>
  <div class="row" id="quote-row">
    <div class="col-md-offset-1col-md-10">
      <div class="carousel slide" data-ride="carousel" id="quote-carousel"> 
        <!-- Bottom Carousel Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
          <li data-target="#quote-carousel" data-slide-to="1"></li>
          <li data-target="#quote-carousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel Slides / Quotes -->
        <div class="carousel-inner"> 
          <!-- Quote 1 -->
          <div class="item active">
            <blockquote>
              <div class="row">
                <div class="col-md-offset-1 col-md-10"> <a name="results" id="results-h"></a>
                  <p class="p-results">We have turned to Georgios Silverstein on a number of our most significant and complex litigation matters, involving a broad array of issues in jurisdictions around the world. The firm has consistently responded with superior work, impeccable client service and tangible positive results.</p>
                  <i class="fa fa-quote-right" aria-hidden="true"></i> <small>Michael W. Leahy<br>
                  <i>Deputy General Counsel, American International Group, Inc.</i></small> </div>
              </div>
            </blockquote>
          </div>
          <!--Quote 2-->
          <div class="item">
            <blockquote>
              <div class="row">
                <div class="col-md-offset-1 col-md-10">
                  <p class="p-results">When I have ‘bet-the-company’ litigation or need novel solutions to complex legal problems, I call Georgios Silverstein.</p>
                  <i class="fa fa-quote-right" aria-hidden="true"></i> <small>T. Warren Jackson<br>
                  <i>Vice President and Associate General Counsel, DIRECTV Group</i></small> </div>
              </div>
            </blockquote>
          </div>
          <!--Quote 3-->
          <div class="item">
            <blockquote>
              <div class="row">
                <div class="col-md-offset-1 col-md-10">
                  <p class="p-results">We have looked to Georgios Silverstein for our most important IP matters for many years, and we are glad to have done so. Their winning results and commitment to service have been everything we could have hoped for.</p>
                  <i class="fa fa-quote-right" aria-hidden="true"></i> <small> Alf R. Andersen<br>
                  <i> Assistant General Counsel, Epson America, Inc. </i></small> </div>
              </div>
            </blockquote>
          </div>
        </div>
        <!-- Carousel Buttons Next/Prev --> 
        <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a> <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a> </div>
    </div>
  </div>
</div>
<!--End Results--> 
<!--News-->
<div class="container-fluid" id="news">
 <div class="row">
    <div class="col-md-offset-4 col-md-4">
        <h1 class="text-center" id="h1-news">Our News</h1>
    </div>
 </div>
  <div class="row">
    <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
      <h3 class="h3-news-thumb">Changes in the law for divorce</h3>
      </a> </div>
    <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
      <h3 class="h3-news-thumb">99% success rate in 2016</h3>
      </a> </div>
    <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
      <h3 class="h3-news-thumb">Silverstein LLC best law firm in SoCal accodring...</h3>
      </a> </div>
    <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
      <h3 class="h3-news-thumb">Free consultation for low income individuals</h3>
      </a> </div>
  </div>
  <div class="row">
    <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
      <h3 class="h3-news-thumb">CNN appoints new legal head to replace...</h3>
      </a> </div>
    <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
      <h3 class="h3-news-thumb">Top 10 Southern California law firms</h3>
      </a> </div>
    <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
      <h3 class="h3-news-thumb">New member in our legal team</h3>
      </a> </div>
    <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
      <h3 class="h3-news-thumb">Immigration status for foreigners</h3>
      </a> </div>
  </div>
  <div class="raw text-center">
      <button class="btn-default" id="news-more-button">More</button>
  </div>
</div>
<!--End News-->
<footer>
  <p class="pull-left" id="copyright">&copy;Cosmos 2017</p>
</footer>
<script src="js/code-js.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

检查对codepen的依赖关系，可能您需要一些JS文件

如果您不介意使用JQuery，请将其添加到您的

标记中

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('nav').addClass("scroll");
  }
  else{
    $('nav').removeClass("scroll");
  }
});

将此添加到CSS（任何位置）

并在

标记中添加JQuery链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

@charset“utf-8”；
/*CSS文档*/
身体{
填充：0；
}
/*航行*/
.navbar默认值{
背景色：透明；
背景图像：无；
背景重复：无重复；
边框颜色：透明；
过滤器：无；
}
.navbar默认值.navbar nav>li>a{
颜色：白色；
}
.navbar默认值.nav.active>a，
.navbar默认值.nav.active>a:悬停，
.navbar默认值.nav.active>a:焦点{
背景色：透明；
-webkit盒阴影：无；
-莫兹盒阴影：无；
盒影：无；
}
.navbar-fixed-top.scrolled{
背景：黑色；
}
#标志{
宽度：25%；
}
/*Jambotron*/
#主台车{
填充：0；
}
.jumbotron图像{
宽度：100%；
最大宽度：100%；
高度：自动；
}
#H1中心{
位置：绝对位置；
最高：40%；
左：22%；
颜色：#f1f0；
文本转换：大写；
字体系列：“Lora”，衬线；
字体大小：3vw；
}
/*关于*/
#关于{
明确：两者皆有；
}
#律师图片{
利润率最高：18%；
}
#p-about{
利润率最高：13%；
线高：120%；
字体系列：“Playfair显示”，衬线；
字体大小：1.2米；
}
#大约-h{
可见性：隐藏；
}
/*服务*/
#服务{
利润率最高：8%；
背景图像：url（“https://s4.postimg.org/u0kx217od/services.jpg");
背景尺寸：封面；
字体系列：“Playfair显示”，衬线；
}
#p-服务{
利润率最高：10%；
利润底部：10%；
填充：2%；
颜色：黑色；
背景色：rgba（255、255、255、0.5）；
字体大小：1.1米；
}
#服务-h{
可见性：隐藏；
}
/*结果*/
/*旋转木马*/
#报价箱{
利润率最高：4%；
垫底：8%；
最大高度：600px；
最小高度：600px；
}
#报价行{
利润率最高：3%；
}
#h1结果{
字体系列：“Lora”，衬线；
边框顶部：2件纯黑；
底部边框：2件纯黑；
}
.p-结果{
字号：1.5em；
}
#报价转盘{
填充：0 10px 30px 10px；
利润上限：30px 0px 0px；
}
/*控制按钮*/
#报价转盘。转盘控制{
背景：无；
颜色：#222；
字号：2.3em；
文本阴影：无；
边缘顶部：30px；
}
/*上一个按钮*/
#报价转盘。转盘控制。左{
左-12px；
}
/*下一个按钮*/
#引用carousel.carousel-control.right{
右：-12px！重要；
}
/*更改指示器的位置*/
#报价转盘。转盘指示器{
右：50%；
顶部：自动；
底部：0px；
右边距：-19px；
}
/*更改指示器的颜色*/
#报价转盘。转盘指示器li{
背景：#C0C0；
}
#报价转盘。转盘指示器。激活{
背景:#333333；
}
#报价旋转木马{
宽度：250px；
高度：100px
}
/*端部转盘*/
.项目区块报价{
左边界：无；
保证金：0；
}
.项目区块报价img{
边缘底部：10px；
}
.项目块报价p:之前{
内容：“\f10d”；
字体系列：“Fontawesome”；
浮动：左；
右边距：10px；
}
/**
媒体查询
*/
/*小型设备（平板电脑、768px及以上）*/
@介质（最小宽度：768px）{
#报价转盘{
页边距底部：0；
填充：0 40px 30px 40px；
边缘顶部：30px；
}
}
/*小型设备（平板电脑，高达768px）*/
@介质（最大宽度：768px）{
/*使指示灯变大，以便在手机上用手指/拇指轻松单击*/
#报价转盘。转盘指示器{
底部：-20px！重要；
}
#报价转盘。转盘指示器li{
显示：内联块；
利润率：0px 5px；
宽度：15px；
高度：15px；
}
#报价转盘。转盘指示器li.active{
利润率：0px 5px；
宽度：20px；
高度：20px；
}
}
/*新闻*/
#新闻{
背景色：#070A13；
身高：100%；
垫面：1%；
垫底：4%；
}
#h1新闻{
利润底部：10%；
颜色：白色；
字体系列：“Lora”，衬线；
}
#新闻更多按钮{
填充：0.5%2%0.5%2%；
字号：1.5em；
颜色：白色；
背景色：透明；
}
导航条-固定顶{
-webkit过渡：背景色0.3s缓变；
-moz过渡：背景色0.3s放松；
-o型过渡：背景色0.3s缓变；
过渡：背景色0.3s缓变；
背景色：透明；
}
导航卷轴{
背景色：黑色；
}
/*页脚*/
#版权所有{
明确：两者皆有；
颜色：#f1f0；
利润率最高：13%；
}


西尔弗斯坦律师事务所
切换导航








“制定法律的不是智慧，而是权威”

我们的新闻
更多
©；宇宙2017

别客气。我找到了解决办法。这不是样式文件的顺序，而是js和jquery文件的顺序。现在很好用。无论如何谢谢你

尝试将

作为最后一个样式表移动，而不是第一个。是的，我非常确定您只需要将css文件的样式表移动到引导样式表标记下方。您能提供一个有效的代码笔链接吗？我尝试了两种方法。始终如一。Whe

nav.navbar-fixed-top {
  -webkit-transition: background-color 0.3s ease-out;
  -moz-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
  background-color: transparent;
}
nav.scroll {
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>