Question

我有一个带有scrollspy的bootstrap导航 - 固定且没有背景颜色。

当我向下滚动时，我有不同的部分，背景颜色不同。

然后我需要一个解决方案来改变导航的de字体颜色，以与剖面背景形成对比。

我不是那么擅长CSS - 那么，对不起，如果它是一个虚假的问题 - 但是有办法做到这一点吗？

更改每个部分的导航字体？

AND，它可以在某些部分隐藏导航栏（比如主页部分，我有另一个导航菜单）

TKS！

Answer 1

好的，我做了一个例子。我希望这就是你要找的东西：

http://jsfiddle.net/gpcasx24/3/

以下javascript（需要jquery）检查当scrollspy注意到用户输入了新的部分并检查它是什么部分。它从数组ColorForSection中提取部分的名称并抓取颜色，您可以定义颜色。

// Change this to define your colors. Can also be rgb(0,0,0) etc
var ColorForSection = {
  '#moose': '#ff0000',
  '#bear': "#00ff00",
  '#beaver': "#0000ff",
  '#raccoon': "#ffff00",
  '#bobcat': "#00ffff",
}

// Change the navbar's link color to a defined one based on the active nav link
function ChangeNavColor() {
        // Get the section name from the navbar' now active URL
    var currentSection = $(".nav li.active > a").attr('href');
    // Set the link color
    $(".nav a:link").css('color', ColorForSection[currentSection]);  
}

// When scrollspy activates a new section, execute the ChangeNavColor function
$(document).on('activate.bs.scrollspy', ChangeNavColor);

// Call the function when the navbar's done loading
// So we also have the correct color to begin with.
$('.nav').ready(ChangeNavColor);

如果您的链接href不是#blabla，请立即告诉我，我将更改代码！

要在页面顶部隐藏导航栏：
使用这段代码：

// Execute the function when the page is scrolled
$(document).scroll(function() {
  // Get the navbar
  var nav = $('nav');
  // Enable the class 'hidden' if scrollTop is lower or equal to 2
  nav.toggleClass('hidden', $(document).scrollTop() <= 2);
});

toggleClass的工作原理如下。您可以告诉要切换的课程，在这种情况下，隐藏＆＃39;以及它是否应该存在，在第二个参数中由true或false表示。

$(document).scrollTop() <= 2
检查滚动量是否小于2像素。如果您希望将其隐藏在绝对顶部，可以将此值更改为等于0 或者将2更改为主页部分的高度。

隐藏特定部分的导航栏：
请尝试以下方法：

// Sections to hide the nav in
var HideNavInSections = [
    '#moose'
];

// Hide nav for specified sections
function HideNavOnScroll() {
    // Get the section name from the navbar' now active URL
    var currentSection = $(".nav li.active > a").attr('href');
    // Should we hide the nav in this section?
    $('.nav').toggleClass('hidden', HideNavInSections.indexOf(currentSection) != -1);
}

// When scrollspy activates a new section, execute the HideNavOnScroll function  
$(document).on('activate.bs.scrollspy', HideNavOnScroll);

CSS - Bootstrap Scrollspy - 如何根据部分背景更改颜色

1 个答案: