iT邦幫忙

第 12 屆 iThome 鐵人賽

0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 38

Day38 網頁前端-持續練習(隨點隨到)

  • 分享至 

  • xImage
  •  

Day38 隨點隨到

https://ithelp.ithome.com.tw/upload/images/20201007/20129161hpldIC5Vjp.png
https://ithelp.ithome.com.tw/upload/images/20201007/20129161hvpTN72Qnq.png

簡單小語

看到這個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的高度
  1. 加入判斷式決定動作
//判斷條件(中間開始)
if (scrollTop > menuTop) {
$(menuHtml).addClass("showIn");
} else {
$(menuHtml).removeClass("showIn");
}
  1. 點擊滑動效果,使用{ scrollTop: $(“#javascript”).offset().top },600,產生滑動。
  2. 持續磨練並練習To Do List加深印象,努力學習。
  3. 注意CSS物件使用padding推移位置,點擊Vue會因為padding-bottom距離不足而造成與其他相異。
  4. 圖片尺寸利用.pic控制,讓img呈現width:100%父層去操控。
  5. 使用id當作href=” ”的錨點,才能產生點擊觸發效果。

持續練習

Practice(200904 Day 38)

樣板來源

Sticky Slider Navigation (Responsive)


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


上一篇
Day37 網頁前端-持續練習(電光一閃)
下一篇
Day39 網頁前端-持續練習(刻不容緩)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言