个人中心
gpt4 book ai didi

javascript - 根据屏幕上的哪个 div 突出显示导航栏 li 的颜色

转载 作者：可可西里 更新时间：2023-11-01 13:26:28 25 4
gpt4 key购买 nike

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 可以以某种方式做到这一点，但它对我来说太复杂和太长的代码。有人可以用我的例子告诉我如何做吗？ :)

感谢您的宝贵时间!

最佳答案

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

  1. 导航栏，Fixed to top
  2. ScrollSpy

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

@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; }
<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>

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

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

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

关于javascript - 根据屏幕上的哪个 div 突出显示导航栏 li 的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37410508/

25 4 0
文章推荐： php - Laravel 4 迁移 :rollback with --path on artisan CLI
文章推荐： c++ - 在哪里可以找到 Windows 进程中已卸载模块的列表？
文章推荐： python - 杀死python进程时杀死子进程？
文章推荐： php - jQuery DataTables 加载大数据
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com