javascript - 检查特定部分是否在屏幕上以将类添加到特定导航项
问题描述
我有一个导航菜单,它由点组成,每个点都指向具有 id 的特定 div。我需要的是在屏幕上显示特定 div 时使点变大。比方说,如果我向下滚动到“where”部分,我希望指向该部分的点获得一个“active”类,这样我就可以用 css 制作一些视觉效果。
<nav class="header__nav">
<ul class="header__list">
<li class="header__list-item">
<a href="#intro"></a>
</li>
<li class="header__list-item">
<a href="#about"></a>
</li>
<li class="header__list-item">
<a href="#range"></a>
</li>
<li class="header__list-item">
<a href="#why-us"></a>
</li>
<li class="header__list-item">
<a href="#where"></a>
</li>
<li class="header__list-item">
<a href="#footer"></a>
</li>
</ul>
</nav>
js
$(document).ready(function(){
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing');
});
});
解决方案
下面的脚本将在滚动时执行,并检查将类名“活动”添加到屏幕上可见的指定导航菜单。
var $sections = $('.box');
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
var $currentSection
$sections.each(function () {
var divPosition = $(this).offset().top;
if (divPosition - 100 < currentScroll) {
$currentSection = $(this);
}
if ($currentSection) {
var id = $currentSection.attr('id');
$('a').removeClass('active');
$("[href='#" + id + "']").addClass('active');
}
})
});
集成代码。
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing');
});
var $sections = $('.box');
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
var $currentSection
$sections.each(function () {
var divPosition = $(this).offset().top;
if (divPosition - 100 < currentScroll) {
$currentSection = $(this);
}
if ($currentSection) {
var id = $currentSection.attr('id');
$('a').removeClass('active');
$("[href='#" + id + "']").addClass('active');
}
})
});
});
ul {
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
.box {
padding-top: 80px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="header__nav">
<ul class="header__list">
<li class="header__list-item">
<a href="#intro">intro</a>
</li>
<li class="header__list-item">
<a href="#about">about</a>
</li>
<li class="header__list-item">
<a href="#range">range</a>
</li>
<li class="header__list-item">
<a href="#why-us">why-us</a>
</li>
<li class="header__list-item">
<a href="#where">where</a>
</li>
<li class="header__list-item">
<a href="#footer">footer</a>
</li>
</ul>
</nav>
<div>
<div id="intro" class="box">Introduction</div>
<div id="about" class="box">About us</div>
<div id="range" class="box">Range</div>
<div id="why-us" class="box">why us</div>
<div id="where" class="box">where</div>
<div id="footer" class="box">footer</div>
</div>
推荐阅读
- javascript - 如何在javascript中添加触摸事件(屏幕上的右、左和下)?
- c# - 在 Razor 视图中使用时找不到命名空间
- elasticsearch - 标题文本的弹性搜索自动完成
- logging - 我们应该登录同一个数据库还是单独的数据库
- laravel - 在 gitlab-ci 期间无法在 docker 中启动 MySQL 服务
- mysql - 使用通配符在两列中查找 MySQL 近似重复项
- python - 分解 with 语句
- azure - 无法将 docker 映像从 azure 注册表托管到 azure 批处理
- javascript - JointJS 端口不起作用
- sql-server - SQL 透视一列中具有多个属性名称且另一列中的另一行中具有多个值的行