在滚动条上更改Bootstrap 3导航栏的颜色

时间:2018-06-21 03:18:51

标签: javascript html css twitter-bootstrap-3 navbar

这是我的问题:

当用户向下滚动时,如何将Bootstrap 3 Navbar的颜色从透明更改为白色?

请帮助。

顺便说一句,我使用的navbar的代码是Bootstrap的文档/ W3schools.com中的默认代码。

2 个答案:

答案 0 :(得分:0)

window.addEventListener("scroll", function(event) {
  if(this.scrollY != 0) {
  document.getElementById('nav').style.background = "#fff";
  }
  else {
  document.getElementById('nav').style.background = "transparent";
  }
});

将您的ID用于带有颜色属性而不是nav的导航栏,我也默认使用0,但是您可以根据内容开始之前的填充或边距来更改值

答案 1 :(得分:0)

这里是JS小提琴Link

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $(".navbar-default").css('background-color', '#f0f0f0');
       } else {
          $('.navbar-default').css('background-color', 'transparent');
       }
   });
    }
});

逻辑是使用.scroll函数检查滚动的位置, 并相应地更改颜色

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $(".navbar-default").css('background-color', '#f0f0f0');
       } else {
          $('.navbar-default').css('background-color', 'transparent');
       }
   });
    }
});
.navbar-default{
    background:transparent;
    border:none !important;
}
.navbar-nav>li>a:hover{
    color:#1a1a1a;
} 
.collapse.in{
    
    background-color:#f0f0f0 !important;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus
.spacer{
   background-color:#888;   
}

.spacer{
    height:100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>



<div class="spacer"></div>

<p id="startchange">
    Roof party kale chips fixie viral DIY salvia seitan XOXO Banksy. Chia plaid meggings, DIY Thundercats salvia freegan jean shorts gentrify. Retro four loko meh, banjo bespoke ennui wolf before they sold out vegan keytar gastropub beard seitan fashion axe street art. Cosby sweater American Apparel gluten-free skateboard leggings plaid swag banh mi Williamsburg drinking vinegar, vinyl slow-carb brunch photo booth. Sartorial Etsy Truffaut, small batch banh mi letterpress tousled cardigan leggings 3 wolf moon ethical messenger bag PBR&B. Tofu Schlitz narwhal, banjo Bushwick forage trust fund next level bespoke. Gastropub scenester Truffaut locavore deep v, forage ugh Wes Anderson twee.
</p>
<p>
Pug beard American Apparel post-ironic normcore, aesthetic plaid gentrify narwhal asymmetrical craft beer photo booth gastropub Echo Park selfies. Asymmetrical Etsy church-key Cosby sweater street art, ethical tattooed Portland shabby chic small batch twee scenester hella seitan direct trade. Plaid mlkshk lomo try-hard, Portland High Life selvage cray VHS quinoa. Ennui selfies skateboard, lo-fi iPhone mustache kogi. Tumblr brunch wolf Intelligentsia gluten-free Bushwick. Blog tote bag keytar, twee put a bird on it 8-bit chambray iPhone pop-up Intelligentsia. Brunch ethical quinoa cray, hashtag before they sold out Banksy.
</p>
<p>
+1 wayfarers Schlitz tofu, next level single-origin coffee actually. Butcher fap artisan, Kickstarter beard messenger bag narwhal forage master cleanse normcore irony tofu bicycle rights vegan readymade. Disrupt readymade semiotics cray church-key, Tonx artisan leggings keffiyeh bespoke sriracha VHS photo booth viral 8-bit. Viral try-hard chambray Kickstarter YOLO, meh tofu Brooklyn farm-to-table. Actually street art small batch raw denim PBR&B Cosby sweater. Bitters bespoke trust fund ethnic four loko. Flexitarian artisan whatever street art.
</p>
<p>
Deep v Brooklyn authentic, keffiyeh 8-bit Banksy messenger bag. DIY roof party Thundercats Carles. Organic put a bird on it skateboard, banh mi keytar hashtag sartorial McSweeney's meggings Banksy squid ennui before they sold out. Pinterest next level pug you probably haven't heard of them, banjo drinking vinegar flexitarian vegan organic Austin. Mumblecore irony pug, vinyl cred Etsy YOLO Truffaut asymmetrical small batch. Viral Godard sartorial, cred sustainable banh mi post-ironic church-key 8-bit narwhal umami. Bushwick scenester Schlitz Etsy, ennui brunch banjo literally ethical quinoa.

Hella mixtape lo-fi cornhole, chia hoodie kale chips. Pop-up DIY banh mi, normcore direct trade mumblecore paleo kale chips photo booth vegan. Carles flexitarian Vice, gentrify biodiesel jean shorts Godard Helvetica chia brunch 3 wolf moon forage fanny pack. Cosby sweater hella Etsy, Schlitz pork belly hashtag gluten-free ethical fashion axe keffiyeh selfies chambray quinoa lo-fi. Wayfarers craft beer drinking vinegar, Portland tote bag wolf put a bird on it Carles ethnic Tonx High Life salvia forage American Apparel. Godard Odd Future selvage farm-to-table ethnic disrupt. Mixtape umami dreamcatcher put a bird on it ethical YOLO Schlitz.
</p>
<p>
Disrupt fap iPhone before they sold out seitan YOLO pug artisan. Photo booth stumptown Pitchfork gluten-free selvage, pickled single-origin coffee fixie Intelligentsia kitsch synth literally asymmetrical. Williamsburg Carles hoodie tofu before they sold out, chambray craft beer. Marfa fanny pack church-key, VHS Truffaut whatever banjo Neutra lo-fi before they sold out kogi deep v. Tattooed asymmetrical put a bird on it, flannel church-key 3 wolf moon Pitchfork dreamcatcher Banksy keytar yr flexitarian pug. Sustainable flannel hoodie kale chips occupy Wes Anderson. IPhone Portland flexitarian pickled, gentrify vegan Austin selvage organic butcher skateboard Wes Anderson direct trade mixtape occupy.

Art party DIY 90's hoodie lo-fi. Post-ironic master cleanse lo-fi Banksy, ethnic flannel farm-to-table Etsy. Helvetica authentic shabby chic High Life Blue Bottle slow-carb. Fanny pack you probably haven't heard of them Godard, Shoreditch Cosby sweater deep v twee Banksy High Life. Fingerstache master cleanse tattooed try-hard kale chips gentrify, Odd Future mlkshk umami leggings four loko drinking vinegar lo-fi 3 wolf moon. Tousled cardigan Portland Odd Future 90's. Vinyl leggings food truck street art 3 wolf moon next level.
</p>
<p>
Authentic mumblecore keffiyeh chia, flexitarian Bushwick McSweeney's mlkshk cray Vice gluten-free sartorial hoodie small batch meggings. PBR&B disrupt deep v, kitsch Schlitz Shoreditch wayfarers gentrify bitters shabby chic. Odd Future disrupt gentrify, church-key Cosby sweater drinking vinegar beard blog distillery. Tofu normcore sartorial polaroid trust fund viral bitters scenester. Food truck locavore wayfarers Tonx, umami chillwave beard put a bird on it Intelligentsia. Forage trust fund Truffaut mumblecore. Chia bitters direct trade Etsy, wolf mixtape gluten-free freegan scenester art party Truffaut.
</p>
<p>
3 wolf moon artisan vegan flexitarian, slow-carb Schlitz YOLO four loko Tonx. Tonx ugh put a bird on it yr, 3 wolf moon sustainable trust fund typewriter. Bushwick locavore raw denim before they sold out vinyl. Quinoa fixie fingerstache Thundercats McSweeney's 3 wolf moon. Asymmetrical normcore Neutra swag. Street art seitan Portland hoodie, photo booth master cleanse banh mi Brooklyn synth typewriter PBR&B. Tofu narwhal tousled Marfa.
</p>
<p>
You probably haven't heard of them tattooed Etsy, tote bag skateboard hashtag keffiyeh Helvetica fanny pack bicycle rights. Umami Intelligentsia freegan, Wes Anderson 8-bit normcore slow-carb tattooed lo-fi fanny pack gluten-free mlkshk. Banjo Neutra YOLO, wolf pour-over put a bird on it vinyl hashtag blog letterpress actually dreamcatcher viral. Mixtape semiotics iPhone, sustainable vegan ethical swag roof party keytar leggings. Williamsburg ethical Bushwick jean shorts, Tumblr skateboard aesthetic bicycle rights retro Blue Bottle polaroid cliche semiotics occupy. VHS PBR fingerstache, iPhone leggings Kickstarter Tonx normcore retro 90's paleo direct trade Pitchfork. Lo-fi Truffaut craft beer, forage +1 bitters 8-bit retro master cleanse jean shorts chillwave.
</p>