資訊專欄INFORMATION COLUMN
摘要：頁面用的框架頁面布局導(dǎo)航導(dǎo)航一導(dǎo)航二導(dǎo)航三導(dǎo)航四導(dǎo)航欄固定頁面滾動時導(dǎo)航欄高亮顯示方案一為頁面添加頁面滾動監(jiān)聽事件滾動條距離頂端值滾動條距離頂端值加循環(huán)距離頂端值判斷滾動條位置清除類
頁面用的Bootstrap框架頁面布局
導(dǎo)航欄固定,頁面滾動時導(dǎo)航欄高亮顯示 方案一：
$(window).scroll(function() {
//為頁面添加頁面滾動監(jiān)聽事件
var wst = $(window).scrollTop() //滾動條距離頂端值
console.log("滾動條距離頂端值:" + wst)
var len = 5;
for (var i = 1; i < len; i++) { //加循環(huán)
console.log("item距離頂端值:" + $("#part" + i).offset().top);
var next = i + 1;
var itemOffsetTop = $("#part" + i).offset().top;
console.log(i);
if (i === (len - 1)) {
var condition = itemOffsetTop <= wst;
} else {
var itemNextOffsetTop = $("#part" + next).offset().top;
var condition = itemOffsetTop <= wst && itemNextOffsetTop >= wst;
}
console.log(condition, i)
if (condition) { //判斷滾動條位置
$(".navbar-nav li").removeClass("active"); //清除c類
$("#navbar" + i).addClass("active"); //給當前導(dǎo)航加c類
}
}
})
方案二：
1. 導(dǎo)航欄固定不透明
$(window).scroll(function () {
var $nav = $(".navbar-collapse ul li"),
length = $nav.length-1, // 獲取導(dǎo)航菜單 ul li 的個數(shù)
item = new Array(), // 新建一個數(shù)組
sTop = $(window).scrollTop(); // 獲取偏移的高度
for (var i = 0; i < length; i++) {
if (i == 0) {
item[i + 1] = $(".page-wrapper>div:first-child").offset().top;
if (sTop >= item[i + 1]) {
$nav.eq(i).addClass("active").siblings("li").removeClass("active");
}
} else {
item[i + 1] = $(".page-wrapper>div:nth-child(" + (i + 1) + ")").offset().top;
if (sTop >= item[i + 1] - 100) {
$nav.eq(i).addClass("active").siblings("li").removeClass("active");
}
}
}
})
2. 導(dǎo)航欄固定透明
$(window).scroll(function () {
var $nav = $(".navbar-collapse ul li"),
length = $nav.length, // 獲取導(dǎo)航菜單 ul li 的個數(shù)
item = new Array(), // 新建一個數(shù)組
sTop = $(window).scrollTop(); // 獲取偏移的高度
for (var i = 0; i < length; i++) {
item[i + 1] = $(".page-wrapper>div:nth-child(" + (i + 1) + ")").offset().top;
if (sTop >= item[i + 1]) {
$nav.eq(i).addClass("active").siblings("li").removeClass("active");
}
}
})
方案三：
錨點平滑滾動$("body").scrollspy({ target: ".navbar-default" })
$("a").click(function(){
//根據(jù)a標簽的href轉(zhuǎn)換為id選擇器，獲取id元素所處的位置，并高度減50px（這里根據(jù)需要自由設(shè)置）
$("html,body").animate({scrollTop: ($($(this).attr("href")).offset().top)}, 500);
});
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103348.html
摘要：頁面用的框架頁面布局導(dǎo)航導(dǎo)航一導(dǎo)航二導(dǎo)航三導(dǎo)航四導(dǎo)航欄固定頁面滾動時導(dǎo)航欄高亮顯示方案一為頁面添加頁面滾動監(jiān)聽事件滾動條距離頂端值滾動條距離頂端值加循環(huán)距離頂端值判斷滾動條位置清除類 頁面用的Bootstrap框架 頁面布局 Toggle navigation ...
摘要：特點單頁面官網(wǎng)不是傳說中的單頁面應(yīng)用固定頂部，點擊導(dǎo)航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導(dǎo)航隨之切換如考拉微課布局頂部導(dǎo)航欄內(nèi)容區(qū)底部樣式導(dǎo)航欄的樣式要注意，這給當前樣式單獨做了一個層，絕對定位，鼠標移動 特點 單頁面官網(wǎng)--不是傳說中的單頁面應(yīng)用！固定頂部，點擊導(dǎo)航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導(dǎo)航隨之切換如：考拉微課 HTML布局 ...
摘要：特點單頁面官網(wǎng)不是傳說中的單頁面應(yīng)用固定頂部，點擊導(dǎo)航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導(dǎo)航隨之切換如考拉微課布局頂部導(dǎo)航欄內(nèi)容區(qū)底部樣式導(dǎo)航欄的樣式要注意，這給當前樣式單獨做了一個層，絕對定位，鼠標移動 特點 單頁面官網(wǎng)--不是傳說中的單頁面應(yīng)用！固定頂部，點擊導(dǎo)航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導(dǎo)航隨之切換如：考拉微課 HTML布局 ...
摘要：特點單頁面官網(wǎng)不是傳說中的單頁面應(yīng)用固定頂部，點擊導(dǎo)航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導(dǎo)航隨之切換如考拉微課布局頂部導(dǎo)航欄內(nèi)容區(qū)底部樣式導(dǎo)航欄的樣式要注意，這給當前樣式單獨做了一個層，絕對定位，鼠標移動 特點 單頁面官網(wǎng)--不是傳說中的單頁面應(yīng)用！固定頂部，點擊導(dǎo)航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導(dǎo)航隨之切換如：考拉微課 HTML布局 ...
摘要：布局組件需要按特定的結(jié)構(gòu)進行聲明需要指出的是，在一個布局聲明中，等子元素不一定全部使用，比如你可以不要側(cè)欄菜單布局組件簡化了創(chuàng)建可伸縮頁面的過程。 一、布局/Layout MDL的布局/Layout組件用來作為整個頁面其他元素的容器，可以自動適應(yīng)不同的瀏覽器、 屏幕尺寸和設(shè)備。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...
閱讀 3266·2021-11-18 10:02
閱讀 1469·2021-10-12 10:08
閱讀 1269·2021-10-11 10:58
閱讀 1285·2021-10-11 10:57
閱讀 1182·2021-10-08 10:04
閱讀 2138·2021-09-29 09:35
閱讀 787·2021-09-22 15:44
閱讀 1284·2021-09-03 10:30
