Question

JSFIDDLE： https://jsfiddle.net/sjhpmzuk/1/

我有一个单页滚动网站。我已经为您（上）创建了演示，因此您可以更好地理解。我想要的是，当我滚动页面时，我想自动更改导航颜色。

例如，当我来到此页面时，.red位于顶部，因此我想要li:nth-of-type(1) a{color:yellow}。当我滚动浏览页面时，蓝色将符合我们的兴趣点，所以li:nth-of-type(2) a{color:yellow}等所有其他虚构div对于页脚div（在我的示例中为.green），这将以相同的方式工作。

我发现，BootStrap可以以某种方式做到这一点，但它对我来说太复杂和冗长。可以请有人告诉我如何用我的例子做到这一点？：）

谢谢你的时间！

Answer 1

第一个解决方案。通过Bootsrap的组件和javascript。

Navbar，Fixed to top
ScrollSpy

https://jsfiddle.net/glebkema/24tddf46/

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

@media (min-width: 768px) {
  .navbar-nav {
    float: none;
    text-align: center;
  }
  .navbar-nav>li {
    float: none;
    display: inline-block;
  }
}

.navbar-inverse .navbar-nav > .active:nth-of-type(1) > a,
.navbar-inverse .navbar-nav > .active:nth-of-type(1) > a:hover,
.navbar-inverse .navbar-nav > .active:nth-of-type(1) > a:focus {
  color: red;
}

.navbar-inverse .navbar-nav > .active:nth-of-type(2) > a,
.navbar-inverse .navbar-nav > .active:nth-of-type(2) > a:hover,
.navbar-inverse .navbar-nav > .active:nth-of-type(2) > a:focus {
  color: blue;
}

.navbar-inverse .navbar-nav > .active:nth-of-type(3) > a,
.navbar-inverse .navbar-nav > .active:nth-of-type(3) > a:hover,
.navbar-inverse .navbar-nav > .active:nth-of-type(3) > a:focus {
  color: green;
}

#red,
#blue,
#green {
  width: 100%;
  height: 1000px;
}
#red   { background: red; }
#blue  { background: blue; }
#green { background: green; }

＆＃13;

<body data-spy="scroll" data-target="#navbar" data-offset="60">
  <nav id="navid" class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#red">red</a></li>
          <li><a href="#blue">blue</a></li>
          <li><a href="#green">green</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div id="red"></div>
  <div id="blue"></div>
  <div id="green"></div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>  
</body>

＆＃13;

第二个解决方案。通过CSS和jQuery。

https://jsfiddle.net/glebkema/kbggfwhk/

＆＃13;

$(document).ready(function() {
  var selectWindow = $(window);
  var selectBody   = $('body,html');
  var selectRed    = $('#red');
  var selectBlue   = $('#blue');
  var selectGreen  = $('#green');

  var NAVBAR = '.sticky-header';
  var menuRed   = $(NAVBAR + '>ul>li:nth-of-type(1)');
  var menuBlue  = $(NAVBAR + '>ul>li:nth-of-type(2)');
  var menuGreen = $(NAVBAR + '>ul>li:nth-of-type(3)');

  var OFFSET = $(NAVBAR).outerHeight();
  var scrollRed   =   selectRed.offset().top - OFFSET;
  var scrollBlue  =  selectBlue.offset().top - OFFSET;
  var scrollGreen = selectGreen.offset().top - OFFSET;
  
    menuRed.click(function(){ scrollTo(scrollRed)   });
   menuBlue.click(function(){ scrollTo(scrollBlue)  });
  menuGreen.click(function(){ scrollTo(scrollGreen) });

  selectWindow.scroll(function() {
    var currentY = $(this).scrollTop();
    if (currentY >= scrollGreen) { checkActive(menuGreen); } else 
    if (currentY >= scrollBlue)  { checkActive(menuBlue);  } else 
    if (currentY >= scrollRed)   { checkActive(menuRed);   };
  });

  function scrollTo(scrollTopNew) {
    selectBody.stop().animate({scrollTop: scrollTopNew}, 1000);
  }
  
  function checkActive(e) {
    if( !e.hasClass('active') ) {
      $(NAVBAR + '>ul>li.active').removeClass('active');
      e.addClass('active');
    }
  }
}); //jQuery

＆＃13;

body {
  margin: 0;
  padding: 0;
}

.sticky-header {
  background-color: #393939;
  height: 50px;
  position: fixed;
  width: 100%;
}

.sticky-header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.sticky-header li {
  display: inline-block;
}
.sticky-header li a {
  color: white;
  display: inline-block;
  font-size: 20px;
  line-height: 50px; /* = height of .sticky-header */
  padding: 0 15px;
  text-decoration: none;
}
.sticky-header li a:hover { 
  background-color: #555;
}
.sticky-header > ul > li:nth-of-type(1).active a { color: red; }
.sticky-header > ul > li:nth-of-type(2).active a { color: blue; }
.sticky-header > ul > li:nth-of-type(3).active a { color: green; }

#red,
#blue,
#green {
  height: 1000px;
  width: 100%;
}
#red   { background: red; }
#blue  { background: blue; }
#green { background: green; }

＆＃13;

<div class="sticky-header">
  <ul>
    <li class="active"><a href="#">red</a></li>
    <li><a href="#">blue</a></li>
    <li><a href="#">green</a></li>
  </ul>
</div>
<div id="red"></div>
<div id="blue"></div>
<div id="green"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

＆＃13;

高亮显示导航栏li基于div在屏幕上的颜色

1 个答案: