锚链接特效导航栏

最新推荐文章于 2020-11-11 15:18:29 发布

qq_41563226

最新推荐文章于 2020-11-11 15:18:29 发布

阅读量377

点赞数

本文链接：https://blog.csdn.net/qq_41563226/article/details/80805405

版权

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>锚链接</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.row li {
width: 100%;
height: 600px;
/* border: 1px solid black; */
list-style: none;
text-align: center;
font-size: 40px;
line-height: 400px;
}

.navbar {
position: fixed;
top: 0px;
}

body {
overflow: hidden;
}
.actives{
background: red;
}
.navli li a{
/* animation: all 0.8s; */
}
</style>
</head>

<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div class="navli">
<ul class="nav navbar-nav">
<li class="active">
<a href="#one">one</a>
</li>
<li>
<a href="#two">two</a>
</li>
<li class="dropdown">
<a href="#three">three </a>
</li>
<li >
<a href="#four">four</a>
</li>
<li>
<a href="#five">five</a>
</li>
<li class="dropdown">
<a href="#six" id="sixs">six </a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row colorli">
<li id="one" style="background: cornflowerblue;">one</li>
<li id="two" style="background: lawngreen;">two</li>
<li id="three" style="background: orangered;">three</li>
<li id="four" style="background: palevioletred;">four</li>
<li id="five" style="background: teal;">five</li>
<li id="six" style="background: skyblue;">six</li>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

<script>
// 单个的效果
// $('#sixs').click(function () {
// $('html, body').animate({
// scrollTop: $($.attr(this, 'href')).offset().top
// }, 500);
// return false;
// });

// 返回当前URL的路径名：document.write(location.pathname);

// 但页面发生滚动时滚动到相应位置是页面相应位置的导航显示高亮的状态
$(document).scroll(function () {
var one = document.getElementById('one').getBoundingClientRect().top
var two = document.getElementById('two').getBoundingClientRect().top
var three = document.getElementById('three').getBoundingClientRect().top
var four = document.getElementById('four').getBoundingClientRect().top
var five = document.getElementById('five').getBoundingClientRect().top
var six = document.getElementById('six').getBoundingClientRect().top
console.log(six)
var li = $('.navli li')
console.log(five)

$().each(function(index){

})
if (one <= 100 && one >= 0) {
// 显示第一个导航
li.eq(0).addClass('active')
li.eq(0).siblings().removeClass('active')
} else if (two <= 100 && two >= 0) {
// 显示第二个导航
li.eq(1).addClass('active')
li.eq(1).siblings().removeClass('active')
} else if (three <= 100 && three >= 0) {
// 显示第三个导航
li.eq(2).addClass('active')
li.eq(2).siblings().removeClass('active')
}else if (four <= 100 && four >= 0) {
// 显示第三个导航
li.eq(3).addClass('active')
li.eq(3).siblings().removeClass('active')
}else if (five <= 100 && five >= 0) {
// 显示第三个导航
// alert(1)
// $(".navli li a").css({ "background": "#e7e7e7" })
// li.eq(5).css({ "background": "red" })
li.eq(4).addClass('active')
li.eq(4).siblings().removeClass('active')
}else if (six <= 349 && six >= 0){
// 显示第三个导航
li.eq(5).addClass('active')
li.eq(5).siblings().removeClass('active')
}
})

// 点击导航使页面平滑的跳转到相应的位置
$(function () {
$('.navli a[href*="#"],area[href*="#"]').click(function () {

$(this).addClass('active')
$(this).siblings().removeClass('active')
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');

if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
})

//当在css 隐藏滚动条使用以下js 可是页面发生滚动
$(document).ready(function () {
var dou = $(document).height();
var win = $(window).height();
var maxY = dou - win + 100;
var topY = 0;
//鼠标的滚轮事件控制页面的滚动
$(document).on("wheel", function (event) {
dou = $(document).height();
maxY = dou - win + 100;

var e = event.originalEvent
topY += e.deltaY
topY = Math.max(0, topY)
topY = Math.min(maxY, topY)
$(this).scrollTop(topY)
})
})
</script>
</body>

</html>

qq_41563226

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
锚链接特效导航栏

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
复制链接

扫一扫