Bootstrap导航栏将颜色更改为滚动 [英] Bootstrap navbar change color to the scroll

问题描述

我使用引导程序作为主题，并且看到了以下站点: http://www.luatix.org/en/，我喜欢该功能对导航栏的影响.向下滚动时更改颜色并更改元素的颜色.

谢谢

解决方案

这是一个 jsfiddle示例.使用Jquery根据滚动像素位置更改背景颜色.

这是一个使用引导程序的小提琴

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

可以在滚动后更改导航栏颜色吗?

I use bootstrap for a theme, and I saw this site :http://www.luatix.org/en/ and I like the effect on navbar. Change color when scroll down and change color of elements.

Thanks

解决方案

Here is a jsfiddle example. Using Jquery to change the background color based on scroll pixel position.

Here is a fiddle using bootstrap

$(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');
       }
   });
    }
});

Possible Duplicate of Changing nav-bar color after scrolling?

这篇关于Bootstrap导航栏将颜色更改为滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！