Question

我要使导航栏背景颜色在达到全屏背景图像的末尾时变为黑色。我正在使用Bootstrap 4。

我做了很多尝试，最终指向this post，它显示了导航栏至少在滚动时改变了颜色，所以我接受了该代码并对其进行了修改，但是它不起作用。如果有人可以在滚动全屏背景图像后迅速写出最基本的代码以使导航栏消失，那将是惊人的，我将非常感谢。该代码段显示了我目前的状态：

HandleBatch

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it 
takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 1200, function(){
   
        // Add hash (#) to URL when done scrolling (default click 
behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

$(document).ready(function(){
$("#infowebstyle1").click(function(){
$("#infoweb1").show();
$("#infoweb2").hide();
$("#infoweb3").hide();
});
});
$(document).ready(function(){
$("#infowebstyle2").click(function(){
$("#infoweb1").hide();
$("#infoweb2").show();
$("#infoweb3").hide();
});
});
$(document).ready(function(){
$("#infowebstyle3").click(function(){
$("#infoweb1").hide();
$("#infoweb2").hide();
$("#infoweb3").show();
});
});
$(document).ready(function(){
$("#infowebstyle1").click(function(){
$("#infotext1").show();
$("#infotext2").hide();
$("#infotext3").hide();
});
});
$(document).ready(function(){
$("#infowebstyle2").click(function(){
$("#infotext1").hide();
$("#infotext2").show();
$("#infotext3").hide();
});
});
$(document).ready(function(){
$("#infowebstyle3").click(function(){
$("#infotext1").hide();
$("#infotext2").hide();
$("#infotext3").show();
});
});



$(document).ready(function(){
$("#articlewebstyle1").click(function(){
$("#articleweb1").show();
$("#articleweb2").hide();
$("#articleweb3").hide();
});
});
$(document).ready(function(){
$("#articlewebstyle2").click(function(){
$("#articleweb1").hide();
$("#articleweb2").show();
$("#articleweb3").hide();
});
});
$(document).ready(function(){
$("#articlewebstyle3").click(function(){
$("#articleweb1").hide();
$("#articleweb2").hide();
$("#articleweb3").show();
});
});
$(document).ready(function(){
$("#articlewebstyle1").click(function(){
$("#articletext1").show();
$("#articletext2").hide();
$("#articletext3").hide();
});
});
$(document).ready(function(){
$("#articlewebstyle2").click(function(){
$("#articletext1").hide();
$("#articletext2").show();
$("#articletext3").hide();
});
});
$(document).ready(function(){
$("#articlewebstyle3").click(function(){
$("#articletext1").hide();
$("#articletext2").hide();
$("#articletext3").show();
});
});



$(document).ready(function(){
$("#blogwebstyle1").click(function(){
$("#blogweb1").show();
$("#blogweb2").hide();
$("#blogweb3").hide();
});
});
$(document).ready(function(){
$("#blogwebstyle2").click(function(){
$("#blogweb1").hide();
$("#blogweb2").show();
$("#blogweb3").hide();
});
});
$(document).ready(function(){
$("#blogwebstyle3").click(function(){
$("#blogweb1").hide();
$("#blogweb2").hide();
$("#blogweb3").show();
});
});
$(document).ready(function(){
$("#blogwebstyle1").click(function(){
$("#blogtext1").show();
$("#blogtext2").hide();
$("#blogtext3").hide();
});
});
$(document).ready(function(){
$("#blogwebstyle2").click(function(){
$("#blogtext1").hide();
$("#blogtext2").show();
$("#blogtext3").hide();
});
});
$(document).ready(function(){
$("#blogwebstyle3").click(function(){
$("#blogtext1").hide();
$("#blogtext2").hide();
$("#blogtext3").show();
});
});



$(document).ready(function(){
$("#photowebstyle1").click(function(){
$("#photoweb1").show();
$("#photoweb2").hide();
$("#photoweb3").hide();
});
});
$(document).ready(function(){
$("#photowebstyle2").click(function(){
$("#photoweb1").hide();
$("#photoweb2").show();
$("#photoweb3").hide();
});
});
$(document).ready(function(){
$("#photowebstyle3").click(function(){
$("#photoweb1").hide();
$("#photoweb2").hide();
$("#photoweb3").show();
});
});
$(document).ready(function(){
$("#photowebstyle1").click(function(){
$("#phototext1").show();
$("#phototext2").hide();
$("#phototext3").hide();
});
});
$(document).ready(function(){
$("#photowebstyle2").click(function(){
$("#phototext1").hide();
$("#phototext2").show();
$("#phototext3").hide();
});
});
$(document).ready(function(){
$("#photowebstyle3").click(function(){
$("#phototext1").hide();
$("#phototext2").hide();
$("#phototext3").show();
});
});



$(document).ready(function(){
$("#ecomwebstyle1").click(function(){
$("#ecomweb1").show();
$("#ecomweb2").hide();
$("#ecomweb3").hide();
});
});
$(document).ready(function(){
$("#ecomwebstyle2").click(function(){
$("#ecomweb1").hide();
$("#ecomweb2").show();
$("#ecomweb3").hide();
});
});
$(document).ready(function(){
$("#ecomwebstyle3").click(function(){
$("#ecomweb1").hide();
$("#ecomweb2").hide();
$("#ecomweb3").show();
});
});
$(document).ready(function(){
$("#ecomwebstyle1").click(function(){
$("#ecomtext1").show();
$("#ecomtext2").hide();
$("#ecomtext3").hide();
});
});
$(document).ready(function(){
$("#ecomwebstyle2").click(function(){
$("#ecomtext1").hide();
$("#ecomtext2").show();
$("#ecomtext3").hide();
});
});
$(document).ready(function(){
$("#ecomwebstyle3").click(function(){
$("#ecomtext1").hide();
$("#ecomtext2").hide();
$("#ecomtext3").show();
});
});

/* KEYFRAMES START */

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
	transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
	animation-name: slideInDown;
}

@keyframes fadeIn {
	0%		{opacity: 0;}
	10%		{opacity: 0.1;}
	20%		{opacity: 0.2;}
	30%		{opacity: 0.3;}
	40%		{opacity: 0.4;}
	50%		{opacity: 0.5;}
	60%		{opacity: 0.6;}
	70%		{opacity: 0.7;}
	80%		{opacity: 0.8;}
	90%		{opacity: 0.9;}
	100%	{opacity: 1;}

}

.fadeIn {
	animation-name: fadeIn;
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
}

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  animation-name: slideInRight;
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }

  50% {
    transform: rotate(-10deg);
  }

  70% {
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.jackInTheBox {
  animation-name: jackInTheBox;
}

/* KEYFRAMES END */





/* NAVBAR START */

.navbar {
	height:90px;
	color:white;
}

.nav-link {
	text-align:center;
	color:white;
	background-color:transparent;
}

#logo {
	width:175px;
	height:65px;
	border: 1px solid white;
}



li::after {
	background-color: white;
	content: "";
	width: 0;
	height: 3px;
	left: 50%;
	bottom: 0;
	position: absolute;
}

li:hover::after {
	width: 100%;
	left:0%;
	animation-name: fadeIn;
	animation-delay: 0s;
	animation-duration: 300ms;
}

.nav-item {
	animation-name: slideInDown;
	animation-duration: 800ms;
	animation-delay: 0s;
	font-family: 'Work Sans', sans-serif;
	font-weight:100;
}

li {
	position: relative;
}

.navbar-nav.navbar-center {					/* Centers navbar items to the middle */
    position: absolute;	
    left: 50%;
    transform: translatex(-50%);
}

.navbar-nav > li{			/* Creates space between items in navbar */
	margin-left:30px;
	margin-right:30px;
}

.navbar-brand {
	animation-name: slideInDown;
	animation-duration: 800ms;
	animation-delay: 0s;
}

.navbar a {
	color: white;
	padding: 12px 20px;
	text-decoration: none;
	border-radius: 8px;
	font-size: 20px;
}

/* NAVBAR END */

我还创建了一个CodePen。

Answer 1

添加此CSS和Jquery

.navbar-light.black-bg{
  background:#000 !important;
}

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 300) {
        $(".navbar").addClass('black-bg');
    } else {
        $(".navbar").removeClass("black-bg");
    }
});

https://codepen.io/anon/pen/ROgeLO

Answer 2

基于Lalji的回答，一旦div（此处为.view）的高度（减去.navbar的高度）已滚动，我将修改建议的JS以添加类。我还将向.navbar添加背景过渡，以实现流畅的体验。

JS：

 $(window).scroll(function() {    
      var scroll = $(window).scrollTop();

      if (scroll >= $('.view').height() - 90) {
           $(".navbar").addClass('black-bg');
      } else {
           $(".navbar").removeClass("black-bg");
      }
 });

CSS：

 .navbar {
      transition: background 1s; /* Change 1s to the wanted duration */
 }

可作为拉尔吉（Lalji）的笔here的叉子。

滚动过去全屏背景图像后如何更改导航栏背景颜色

2 个答案: