Skip to content

hoyi-23/crowdfunding-platforms

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

募資平台_拼拼

Demo 這次的募資網站,運用BootStrap5為主要框架來製作,製作過程中遇到的困難點主要有兩個:

  1. Sass 自訂樣式修改 文章一 文章二
  2. 使用BS-tooltip/表單驗證時的JS部分
  3. Scroll 事件運用

這邊是簡單練習BS5操作與運用,所以scss直接修改在node_module內了!(一般不能直接些改node_module,若與他們共同管理網站,他人下載時node_module是自動install新的)


tooltip 工具提示框

基本上的設定在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
    );
  });

Scroll 事件運用

募資網站中,我想要做到

  1. 點擊專案募資的按鈕,移動到表單區塊。
  2. 手機下方釘選的募資按鈕,只在中間區塊時出現。

點擊專案募資的按鈕,移動到表單區塊

這邊我使用 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));

手機下方釘選的募資按鈕,在底部表單出現後消失

製作的觀念: 讓 特定物件 在 滾動到某個 特定高度 時消失,我們需要先取得想要物件消失的 特定高度!

  1. 首先,取得顯示範圍最底部的高度。 offsetTop: 回傳元素和 offsetParent(母元素) 之間的距離。 clientHeight: 元素所包含的「子元素」的高度,其中包含了padding,但不包含邊界及捲軸。
  2. 第二,動態取得視窗範圍最底部的高度。
  3. 第三,條件句。當 視窗範圍最底部的高度 大於 顯示範圍最底部的高度時,隱藏特定物件。
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='';
  }
};

About

募資平台_拼拼 : 運用BootStrap5

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages