Day38 隨點隨到

簡單小語

看到這個menu的效果可以fixed在想要的位置上，覺得超酷，立刻查資料看看要如何做，才發現原來可以用JQuery去尋找滑鼠的滾動位置及誤鍵所在位置，利用位置去告知當觸發到這個地方就要做下一件事，邏輯想思考真的很重要，雖然我也是看著老師影片跟著做，但終究只是更著做，還是需要深入了解其應用，未來才能增加更多的可塑性，至於內容物就是先前練習的CSS樣式，不過可以再次練習到Fixed的RWD寬度差異須設定好，避免尺寸變動造成跑板問題。

筆記分享

1. 找出menu的位置，$(“.menu”).offset().top;。
2. 複製一次menu位置，$(“.menu”).clone();。
3. 加入到body，$(“body”).append(menuHtml);。
4. 使用scroll function找到各個位置

$(window).scroll(function () {
// console.log('test');
//找出滾動位置
let scrollTop = $(window).scrollTop();
//找出物件位置的值
let listTop = $(".list").offset().top;
//取出menu高度值
let menuHeight = $(".menu").height();
//console.log(menuHeight);
console.log(scrollTop, listTop);
//取出menu的高度

5. 加入判斷式決定動作

//判斷條件(中間開始)
if (scrollTop > menuTop) {
$(menuHtml).addClass("showIn");
} else {
$(menuHtml).removeClass("showIn");
}

6. 點擊滑動效果，使用{ scrollTop: $(“#javascript”).offset().top },600，產生滑動。
7. 持續磨練並練習To Do List加深印象，努力學習。
8. 注意CSS物件使用padding推移位置，點擊Vue會因為padding-bottom距離不足而造成與其他相異。
9. 圖片尺寸利用.pic控制，讓img呈現width:100%父層去操控。
10. 使用id當作href=” ”的錨點，才能產生點擊觸發效果。

持續練習

Practice(200904 Day 38)

樣板來源

Sticky Slider Navigation (Responsive)

2020 iT邦幫忙鐵人賽 Day38 網頁前端-持續練習(隨點隨到)