Demo 這次的募資網站,運用BootStrap5為主要框架來製作,製作過程中遇到的困難點主要有兩個:
這邊是簡單練習BS5操作與運用,所以scss直接修改在node_module內了!(一般不能直接些改node_module,若與他們共同管理網站,他人下載時node_module是自動install新的)
基本上的設定在BS5上都寫得非常清楚,但特別需要注意的是 tooltip出於效能原因工具提示是選擇性加入的,因此你必須自己將它們初始化 初始化需要再JS加上以下程式碼
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
使用需要加上此段程式碼
(function () {
"use strict";
var forms = document.querySelectorAll(".needs-validation");
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener(
"submit",
function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
},
false
);
});
募資網站中,我想要做到
- 點擊專案募資的按鈕,移動到表單區塊。
- 手機下方釘選的募資按鈕,只在中間區塊時出現。
這邊我使用 scrollIntoView 的方式 點擊後將指定區塊移入視窗中
const gotoform = document.querySelectorAll('.gotoform');
const formPost = document.querySelector("#fillform");
function GotoForm(e){
formPost.scrollIntoView({ behavior: 'smooth'});
}
gotoform.forEach(btn => btn.addEventListener('click',GotoForm,false));
製作的觀念: 讓 特定物件 在 滾動到某個 特定高度 時消失,我們需要先取得想要物件消失的 特定高度!
- 首先,取得顯示範圍最底部的高度。 offsetTop: 回傳元素和 offsetParent(母元素) 之間的距離。 clientHeight: 元素所包含的「子元素」的高度,其中包含了padding,但不包含邊界及捲軸。
- 第二,動態取得視窗範圍最底部的高度。
- 第三,條件句。當 視窗範圍最底部的高度 大於 顯示範圍最底部的高度時,隱藏特定物件。
document.onscroll = function() {
var phoneBtn = document.getElementById('phone-btn');
var showArea = document.getElementById('main');
var showArea_top = showArea.offsetTop;
var showArea_height = showArea.clientHeight;
var showArea_bottom = showArea_top + showArea_height;
console.log(showArea_bottom);
var scrollTop = document.documentElement.scrollTop;
var viewport_height = document.documentElement.clientHeight;
var scrollTop_bottom = scrollTop + viewport_height;
console.log(scrollTop_bottom);
if(scrollTop_bottom > showArea_bottom){
phoneBtn.style.display='none';
}else{
phoneBtn.style.display='';
}
};