html导航栏背景图片,页面导航栏滚动时改变导航栏背景样式及回到顶部
頁(yè)面導(dǎo)航欄滾動(dòng)時(shí)改變導(dǎo)航欄背景樣式
html：
Demo.hero{
padding-top: 409px;
}
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;}
當(dāng)然你也可以定義自己的外觀，可以放上一張圖片來(lái)替代，關(guān)鍵的是保持id與js代碼中一致，而且要將滾動(dòng)導(dǎo)航層的position設(shè)置為fixed，這樣當(dāng)我們拖動(dòng)滾動(dòng)條的時(shí)候，滾動(dòng)導(dǎo)航層才不會(huì)動(dòng)。
2、引入jqeury庫(kù)文件
$( function () {
var speed = 1000;//自定義滾動(dòng)速度
//回到頂部
$("#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代碼中，我們可以自定義滾動(dòng)速度，speed值越大，滾動(dòng)越快
var speed = 1000;
那么你的頁(yè)面便實(shí)現(xiàn)了回到頂部和底部的功能。
在此我還要多添加一個(gè)功能，那就是滑動(dòng)到指定ID的元素，語(yǔ)法如下。需要把scrollTop設(shè)置為
$(‘#ID’).offset().top
總結(jié)
以上是生活随笔為你收集整理的html导航栏背景图片,页面导航栏滚动时改变导航栏背景样式及回到顶部的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： unity_NGUI动态字体制作与字体清
- 下一篇： 拼多多商品推广转链