博客網站顯示框相對瀏覽器固定位置顯示

個人博客網站的菜單漸漸多了起來，文章也在陸續維護了。

當文章內容比較長的時候，往下滑動，文章右側就沒有內容了。

 

希望當瀏覽文章超過二維碼顯示框之後，把右側文章分類顯示框相對瀏覽器固定位置顯示。

 

頁面回到文章頂部時，原樣顯示。

 

需求想好了，就來實現一下。

1、處理只對pc端有效

//是否爲移動端
function is_mobile() {
    var ua = navigator.userAgent.toLowerCase();
    if(/(ip(hone|od)|android|opera m(ob|in)i|windows (phone|ce)|blackberry|s(ymbian|eries60|amsung)|p(laybook|alm|rofile\/midp|laystation portable)|nokia|fennec|htc[-_]|mobile|up.browser|[1-4][0-9]{2}x[1-4][0-9]{2})/i.test(ua)){
        return true;
    }else{
        return false;
    }
}

 

2、獲取原顯示框在瀏覽器裏的座標位置，生成固定顯示的 style 樣式 s

var div = document.getElementById('series');  
var width = div.style.width || div.clientWidth || div.offsetWidth || div.scrollWidth;  
var s = 'position:fixed;top:80px;width:'+width+'px;';

 

3、獲取當前頁面高度，當超過一定高度時，固定位置顯示文章分類顯示框，不超過該高度時，原樣顯示。

//pc端，監聽頁面滾動事件，當高度超過 800 時，隱藏 "筆記彙總與源碼" 和 "微信公衆號" 顯示框
function setFixed() {
	if (!is_mobile()) {
		window.addEventListener("scroll",function(e){
			var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
			if (scrollHeight > 800) {
				$('#series').attr('style', s);
				$('#sources').hide();
				$('#officialAccount').hide();
			} else {
				$('#series').removeAttr('style');
				$('#sources').show();
				$('#officialAccount').show();
			}
		});
	}
}

 

喜歡這些小而美的東西！

 

---

持續更新中...

文章與源碼彙總於  Gitee

個人博客  ConstXiong

微信公衆號技術實踐推文  ConstXiong