在滾動條上更改Bootstrap 3導航欄的顏色

Question

這是我的問題：

當用戶向下滾動時，如何將Bootstrap 3 Navbar顏色從透明更改為白色？

請幫忙。

順便說一句，我使用的navbar代碼是Bootstrap docs / W3schools.com中的默認代碼。

Answer 1

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

使用您的導航欄ID使用color屬性而不是nav，我也默認使用0，但是您可以根據內容開始之前的填充或邊距來更改該值

Answer 2

這是JS小提琴鏈接

$(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>