切换章节按钮位置调整

bookdetail.html

@@ -56,10 +56,10 @@
 		</header>
 		<div id="upperElement" style="height: 100vh;width: 100%;">
 			<div class="container">
-				<div class="Content">
+				<div class="Content" id="Content">
 					<!-- 内容动态加载 -->
 				</div>
-				<div class="page_btn">
+				<div class="page_btn" id="page_btn">
 					<button class="btn-prev colorStyle bgStyle" id="btn_prev">上一章</button>
 					<button class="btn-next colorStyle bgStyle" id="btn_next">下一章</button>
 				</div>

css/main.css

@@ -1,7 +1,7 @@
 /*-----------主体内容-----------*/
 
 .container {
-	padding: 2rem 1rem 1.5rem;
+	padding: 2rem 1rem 0rem;
 }
 
 .Content h3 {
@@ -44,6 +44,16 @@ p {
 	position: relative;
 	z-index: 9999;
 }
+.page_btn_fixed{
+	position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+	z-index: 9999;
+	width: 80%;
+	margin: 0 auto;
+	padding-top: 1rem;
+}
 
 
 .btn-prev,
@@ -305,7 +315,8 @@ p {
 .rule .caption {
 	border-bottom: 0.0625rem solid #444444;
 	text-align: right;
-} 
+}
+
 .rule .tbody .td:nth-of-type(2) {
 	text-align: left;
 }
@@ -317,6 +328,7 @@ p {
 	word-break: break-word;
 	padding: 0;
 }
+
 .rule .th {
 	font-weight: bold;
 	padding: 0.125rem 0;

js/bookdetail.js

@@ -1,4 +1,5 @@
 let beginWid = window.innerWidth;
+let beginHei = window.innerHeight;
 //移动设备的高度
 // let deviceHeight = document.documentElement.clientHeight;
 // $('.container').css('height', deviceHeight+'px')
@@ -22,21 +23,21 @@ var Dom = {
 	header: $("#header"),
 	ChapterDialog: $("#ChapterDialog")
 }
-var Util = (function() { //封装的本地存储和json数据解析
+var Util = (function () { //封装的本地存储和json数据解析
 	var prefix = 'function_reader_';
-	var StorageGetter = function(key) {
+	var StorageGetter = function (key) {
 		return localStorage.getItem(prefix + key);
 	}
-	var StorageSetter = function(key, val) {
+	var StorageSetter = function (key, val) {
 		return localStorage.setItem(prefix + key, val);
 	}
 	//通过url来获取加密信息，并解密
-	var getJsonp = function(url, callback) {
+	var getJsonp = function (url, callback) {
 		return $.jsonp({
 			url: url,
 			cache: true,
 			callback: 'duokan_fiction_chapter',
-			success: function(result) {
+			success: function (result) {
 				//获取加密信息，解码、转json
 				var data = $.base64.decode(result);
 				var json = decodeURIComponent(escape(data));
@@ -71,13 +72,13 @@ var ChapterList = [];
 
 
 var readerm = ReaderModel();
-readerm.init(function(data, mulu) {
+readerm.init(function (data, mulu) {
 	readerUIFrame(data);
 	ChapterList = mulu;
 	readerMuluFrame(mulu, '2');
 	$("#ChapterTitle").text(data.ct);
 	setHtmlStyle()
-
+	setPageBtnPost()
 });
 //业务事件的初始化
 EventHandler();
@@ -134,7 +135,7 @@ function ReaderBaseFrame(container) { //UI渲染层
 						continue;
 					}
 					html +=
-						`<table class="table ${tableObj.className||''}" style="${tableObj.style||''}" cellpadding="0" cellspacing="0">`;
+						`<table class="table ${tableObj.className || ''}" style="${tableObj.style || ''}" cellpadding="0" cellspacing="0">`;
 					if (!!tableObj.tableTitle) {
 						html += `<caption class="caption">${tableObj.tableTitle}</caption>`;
 					}
@@ -148,14 +149,14 @@ function ReaderBaseFrame(container) { //UI渲染层
 							let thList = tr.th;
 							thList.map((item, index) => {
 								html +=
-									`<th class="th ${item instanceof Array ? 'slash-wrap':''}" style="${tr.style && tr.style[index]||''}" colspan="${tr.colSpan&&tr.colSpan[index]||1}" rowspan="${tr.rowSpan&&tr.rowSpan[index]||1}">`;
+									`<th class="th ${item instanceof Array ? 'slash-wrap' : ''}" style="${tr.style && tr.style[index] || ''}" colspan="${tr.colSpan && tr.colSpan[index] || 1}" rowspan="${tr.rowSpan && tr.rowSpan[index] || 1}">`;
 								if (item instanceof Array) {
 									item.map((itemLi, liIndex) => {
 										if (itemLi === "|") {
 											html += `<span class="slash"></span>`
 										} else {
 											html +=
-												`<span class="${liIndex===0?'left':'right'}" style="${liIndex===0?tr.slash&&tr.slash.leftText||'':tr.slash&&tr.slash.rightText||''}">${itemLi}</span>`
+												`<span class="${liIndex === 0 ? 'left' : 'right'}" style="${liIndex === 0 ? tr.slash && tr.slash.leftText || '' : tr.slash && tr.slash.rightText || ''}">${itemLi}</span>`
 										}
 									})
 								} else {
@@ -174,7 +175,7 @@ function ReaderBaseFrame(container) { //UI渲染层
 							html += `<tr class="tr">`;
 							tdList.length && tdList.map((liDom, index) => {
 								html +=
-									`<td class="td" style="${tr.style&&tr.style[index]||''}" colspan="${tr.colSpan&&tr.colSpan[index]||1}" rowspan="${tr.rowSpan&&tr.rowSpan[index]||1}">${liDom}</td>`;
+									`<td class="td" style="${tr.style && tr.style[index] || ''}" colspan="${tr.colSpan && tr.colSpan[index] || 1}" rowspan="${tr.rowSpan && tr.rowSpan[index] || 1}">${liDom}</td>`;
 							})
 							html += "</tr>"
 						})
@@ -188,14 +189,15 @@ function ReaderBaseFrame(container) { //UI渲染层
 			}
 		}
 
-		html = html.replace("##", )
+		html = html.replace("##",)
 		return html;
 	}
 
-	return function(data) { //返回 渲染后的结果data：解密后的json数据
+	return function (data) { //返回 渲染后的结果data：解密后的json数据
 		container.html(ParseChapterData(data));
 		//设置斜线
 		setSlash()
+		setPageBtnPost()
 	}
 }
 
@@ -217,34 +219,34 @@ function ReaderMuluFrame(container, flag) { //目录UI渲染层
 							 	</a></li>`;
 			}
 		}
-		mulu = mulu.replace("##", );
+		mulu = mulu.replace("##",);
 		return mulu;
 	}
 
-	return function(data) { //返回 渲染后的结果data：解密后的json数据
+	return function (data) { //返回 渲染后的结果data：解密后的json数据
 		container.html(ParseChapterMuluData(data));
 	}
 }
 
 function ReaderModel() { //数据交互层
 	//todo 获取章节信息
-	var init = function(Uicallback) { //初始化 信息
-		getFictionInfo(function(mulu) {
-			getCurChaptInfo(Chapter_id, function(data) {
+	var init = function (Uicallback) { //初始化 信息
+		getFictionInfo(function (mulu) {
+			getCurChaptInfo(Chapter_id, function (data) {
 				//todo
 				Uicallback && Uicallback(data, mulu);
 			})
 		})
 	};
 
-	var getFictionInfo = function(callback) { //获取所有章节摘要信息
-		$.get('data/chapter.json', function(data) {
+	var getFictionInfo = function (callback) { //获取所有章节摘要信息
+		$.get('data/chapter.json', function (data) {
 			//todo 获取章节信息之后的回调
 			Chapter_id = parseInt(Util.StorageGetter("ChapterId"));
 			File_id = parseInt(Util.StorageGetter("FileId"));
 			//选择是否从头阅读
 			if (Chapter_id !== 0) {
-				if (confirm('您要继续上次的阅读么？')) {} else {
+				if (confirm('您要继续上次的阅读么？')) { } else {
 					Chapter_id = 0;
 				}
 			}
@@ -268,7 +270,7 @@ function ReaderModel() { //数据交互层
 		}, 'json');
 	};
 
-	var getCurChaptInfo = function(Chapter_id, callback) { //获取当前Chapter_id章节详细信息
+	var getCurChaptInfo = function (Chapter_id, callback) { //获取当前Chapter_id章节详细信息
 		// $.get('data/data' + Chapter_id + '.json', function(data,status) {
 		// 	//todo 获取详细信息之后的回调
 		// 	console.log(status,'status')
@@ -281,14 +283,14 @@ function ReaderModel() { //数据交互层
 		// 	}
 		// }, 'json');
 		$.getJSON('data/data' + Chapter_id + '.json')
-			.done(function(data) {
+			.done(function (data) {
 				// 请求成功，文件存在
 				// console.log("文件存在", data);
 				if (data.result == 0) {
 					callback && callback(data);
 				}
 			})
-			.fail(function(jqXHR, textStatus, errorThrown) {
+			.fail(function (jqXHR, textStatus, errorThrown) {
 				// console.log("文件不存在",jqXHR);
 				callback && callback({
 					p: [],
@@ -304,29 +306,30 @@ function ReaderModel() { //数据交互层
 			});
 	};
 
-	var prveChapter = function() { //上一页
+	var prveChapter = function () { //上一页
 		Chapter_id = parseInt(Chapter_id);
 		if (Chapter_id == 0) {
 			return;
 		}
 		Chapter_id -= 1;
 		//调用方法获取 Chapter_id章节信息
-		getCurChaptInfo(Chapter_id, function(data) {
+		getCurChaptInfo(Chapter_id, function (data) {
 			readerUIFrame(data); //渲染html数据
+
 		});
 		Util.StorageSetter("ChapterId", Chapter_id);
 		//
 		updateFileId()
 	};
 
-	var nextChapter = function() { //下一页
+	var nextChapter = function () { //下一页
 		Chapter_id = parseInt(Chapter_id);
 		if (Chapter_id == ChapterTotal - 1) {
 			return;
 		}
 		Chapter_id += 1;
 		//调用方法获取 Chapter_id章节信息
-		getCurChaptInfo(Chapter_id, function(data) {
+		getCurChaptInfo(Chapter_id, function (data) {
 			readerUIFrame(data);
 		});
 		Util.StorageSetter("ChapterId", Chapter_id);
@@ -335,18 +338,18 @@ function ReaderModel() { //数据交互层
 
 	};
 
-	var jumpChapter = function() { //跳页
+	var jumpChapter = function () { //跳页
 		Chapter_id = parseInt(Chapter_id);
 		File_id = parseInt(File_id);
 		//调用方法获取 Chapter_id章节信息
-		getCurChaptInfo(Chapter_id, function(data) {
+		getCurChaptInfo(Chapter_id, function (data) {
 			readerUIFrame(data); //渲染html数据
 		});
 		Util.StorageSetter("ChapterId", Chapter_id);
 		updateFileId()
 	};
 
-	var updateFileId = function() { //更新目录一级 file_id
+	var updateFileId = function () { //更新目录一级 file_id
 		for (let item of ChapterList) {
 			if (item.type === 'file') {
 				let obj = item.children.find(child => child.chapter_id == Chapter_id);
@@ -387,7 +390,7 @@ function EventHandler() { //业务事件处理层
 
 	//=============
 	let upperElement = document.getElementById('upperElement')
-	upperElement.addEventListener('click', function(event) {
+	upperElement.addEventListener('click', function (event) {
 		var target = event.target;
 		if (['btn_next', 'btn_prev'].includes(target.id)) {
 
@@ -416,7 +419,7 @@ function EventHandler() { //业务事件处理层
 
 	//=============
 	//点击返回事件
-	$(".nav_back_book").click(function() {
+	$(".nav_back_book").click(function () {
 		Chapter_id = parseInt(Chapter_id);
 		if (Chapter_id == 0) {
 			return;
@@ -428,14 +431,14 @@ function EventHandler() { //业务事件处理层
 		readerm.jumpChapter();
 	});
 	//点击目录事件--顶部浮窗
-	$("#topMulu").click(function() {
+	$("#topMulu").click(function () {
 		muluShow("top")
 	});
 	//点击目录事件--底部导航
-	$(".btn-mulu").click(function() {
+	$(".btn-mulu").click(function () {
 		muluShow()
 	});
-	var muluShow = function(type) {
+	var muluShow = function (type) {
 		Dom.icon_extra.removeClass("act");
 		if (Dom.mulu_Box.css('display') == 'none') {
 			$('body,html').addClass('notScroll');
@@ -471,7 +474,7 @@ function EventHandler() { //业务事件处理层
 		actExtraDialog(false);
 	}
 	//点击目录列表进行指定跳转
-	Dom.muluList.on("click", function(e) {
+	Dom.muluList.on("click", function (e) {
 		let cid = $(e.target).data('cid');
 		if (cid === undefined || cid === null || cid === "") {
 			return
@@ -487,7 +490,7 @@ function EventHandler() { //业务事件处理层
 		window.scrollTo(0, 0);
 	})
 	// 点击弹窗内容以外的地方关闭弹窗
-	$("#mulu_Mask").on('click', function(e) {
+	$("#mulu_Mask").on('click', function (e) {
 		// if ($(e.target).closest('#mui-content').length > 0) {
 		//   console.log('弹出框内部被点击了');
 		// } else {
@@ -498,7 +501,7 @@ function EventHandler() { //业务事件处理层
 		// }
 	});
 	//点击字号事件
-	$(".btn_Aa").click(function() {
+	$(".btn_Aa").click(function () {
 		Dom.icon_extra.removeClass("act");
 		if (Dom.font_Pop.css('display') == 'none') {
 			Dom.font_Pop.show();
@@ -510,11 +513,11 @@ function EventHandler() { //业务事件处理层
 		actExtraDialog(false);
 	});
 	//滚动条事件
-	Dom.win.scroll(function() {
+	Dom.win.scroll(function () {
 		actAllDialog(false)
 	})
 	//点击字体大小事件
-	Dom.slider.change(function() {
+	Dom.slider.change(function () {
 		let NowFontSize = Number($(this).val());
 		if (NowFontSize > 24 || NowFontSize < 16) {
 			return;
@@ -526,7 +529,7 @@ function EventHandler() { //业务事件处理层
 		Util.StorageSetter("font_size", NowFontSize);
 	});
 	//点击其他事件
-	$(".btn-extra").click(function() {
+	$(".btn-extra").click(function () {
 		Dom.icon_extra.addClass("act");
 		if (Dom.extra_Pop.css('display') == 'none') {
 			Dom.extra_Pop.show();
@@ -548,7 +551,7 @@ function EventHandler() { //业务事件处理层
 		actFontDialog(false);
 	});
 	//点击背景颜色切换
-	Dom.bkList.on("click", function(e) {
+	Dom.bkList.on("click", function (e) {
 		if (!$(e.target).hasClass("bk-container")) {
 			return
 		}
@@ -557,7 +560,7 @@ function EventHandler() { //业务事件处理层
 
 	})
 	//更新颜色设置的选中效果
-	var updateBgColor = function(target, type) {
+	var updateBgColor = function (target, type) {
 		$(target).addClass("bk-container-current");
 		let optDom = $(target).parent(".bk-item").siblings();
 		$(optDom).each((i, liDom) => {
@@ -575,12 +578,12 @@ function EventHandler() { //业务事件处理层
 	}
 
 
-	$("#btn_prev").click(function() {
+	$("#btn_prev").click(function () {
 		window.scrollTo(0, 0);
 		readerm.prveChapter();
 	});
 
-	$("#btn_next").click(function() {
+	$("#btn_next").click(function () {
 		window.scrollTo(0, 0);
 		readerm.nextChapter();
 	});
@@ -717,6 +720,26 @@ function setSlash() {
 	})
 }
 
+//设置切换章节按钮位置
+function setPageBtnPost() {
+	setTimeout(() => {
+		const btn = document.getElementById('page_btn');
+		const btnHeight = btn.offsetHeight;
+		const content = document.getElementById('Content');
+		const contentHeight = content.offsetHeight;
+		// console.log('文本内容高度:', contentHeight);
+		// console.log('按钮高度：', btnHeight);
+		let sumHei = contentHeight + btnHeight;
+		// console.log('总和：', sumHei, "满屏", beginHei);
+		if (sumHei <= beginHei) {
+			console.log('内容高度少于100vh');
+			$('#page_btn').removeClass('page_btn').addClass('page_btn_fixed');
+		} else {
+			console.log('内容高度大于等于100vh');
+			$('#page_btn').removeClass('page_btn_fixed').addClass('page_btn');
+		}
+	}, 10);
+}
 
 //监听屏幕宽度
 
@@ -733,7 +756,7 @@ const getWindowInfo = () => {
 //防抖
 const debounce = (fn, delay) => {
 	let timer;
-	return function() {
+	return function () {
 		if (timer) {
 			clearTimeout(timer);
 		}