页面导航栏滚动时改变导航栏背景样式
html:
Demo
.hero{
padding-top: 409px;
}
Home
Feature
Overview
Pricing
Team
blog
Download
aaaa
bbb
返回顶部:
1、在压面 body 中的任何地方加入一下代码
回到顶部
回到底部
在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库文件
$( 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);
});
});
在以上的JS代码中,我们可以自定义滚动速度,speed值越大,滚动越快
var speed = 1000;
那么你的页面便实现了回到顶部和底部的功能。
在此我还要多添加一个功能,那就是滑动到指定ID的元素,语法如下。需要把scrollTop设置为
$(‘#ID’).offset().top
如果觉得《html导航栏背景图片 页面导航栏滚动时改变导航栏背景样式及回到顶部》对你有帮助,请点赞、收藏,并留下你的观点哦!