页面导航栏滚动时改变导航栏背景样式及回到顶部
2019-07-30 本文已影响0人
AMONTOP
页面导航栏滚动时改变导航栏背景样式
html：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style2.css">
<style>
.hero{
padding-top: 409px;
}
</style>
</head>
<body>
<header>
<nav id="navbar" class="navbar navbar-custom navbar-fixed-top" data-spy="affix" data-offset-top="70">
<div class="container">
<div class="row">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll logo-light" href="index.html"><img alt="" src="image/logo.png"></a>
<a class="navbar-brand page-scroll logo-clr" href="index.html"><img alt="" src="image/logo-clr.png"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="right-nav text-right">
<ul class="nav navbar-nav menu">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#feature">Feature</a>
</li>
<li>
<a href="#overview">Overview</a>
</li>
<li>
<a href="#pricing">Pricing</a>
</li>
<li>
<a href="#team">Team</a>
</li>
<li>
<a href="#blog">blog</a>
</li>
</ul>
<div class="nav-btn">
<a class="btn grdnt-purple">Download</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<div id="home" class="hero grdnt-purple">
</div>
</header>
<section style="height: 500px">
aaaa
</section>
<section style="height: 500px">
bbb
</section>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/vendor.bundle.js"></script>
</body>
</html>
详细的css与js请查看我的GitHub：
https://github.com/AMONTOP/navbar
返回顶部：
1、在压面 body 中的任何地方加入一下代码
<div id="scroll">
<div id="toTop" class="scrollItem">
回到顶部
</div>
<div id="toBottom" class="scrollItem">
回到底部
</div>
</div>
在head中加入css
#scroll {position:fixed; top:300px; right:100px;z-index:999}
.scrollItem {width:20px; height:70px;border:#e1e1e1 1px solid; cursor: pointer; text-align: center; padding-top: 10px;}
当然你也可以定义自己的外观，可以放上一张图片来替代，关键的是保持id与js代码中一致，而且要将滚动导航层的position设置为fixed，这样当我们拖动滚动条的时候，滚动导航层才不会动。
2、引入jqeury库文件
<script type="text/javascript">
$( function () {
var speed = 1000;//自定义滚动速度
//回到顶部
$("#scroll").hide();
$(window).scroll(function(event){
if( $(window).scrollTop() === 0 ){
$("#scroll").hide();
}else{
$("#scroll").show();
}
});
$( "#toTop").click( function () {
$( "html,body").animate({ "scrollTop" : 0 }, speed);
});
});
</script>
在以上的JS代码中，我们可以自定义滚动速度，speed值越大，滚动越快
var speed = 1000;
那么你的页面便实现了回到顶部和底部的功能。
在此我还要多添加一个功能，那就是滑动到指定ID的元素，语法如下。需要把scrollTop设置为
$(‘#ID’).offset().top
