小麥前端 blog

一個心理人跑來學前端的記錄

0%

navbar 置頂與滾動變化效果示意圖

類似效果的示意圖

前言

在專案開發期間,有要求網站的上方要有 navbar。不過需求有更改過幾次:一開始是會隨著瀏覽器捲動而消失,後來要求下滾時消失上滾時出現,最後則改成 navbar 在頂端時背景透明、下滾後背景白色。

除了置頂、偵測滾動外,在這個需求也遇上了跨平台問題(通常都是跟 Safari 相關 QQ)。偵測滾動之後的再獨立一篇出來,這邊先談 navbar 置頂與跨平台的問題。

閱讀全文 »

能隱藏header的工具,headroom.js

前言

在 2019 年接案時,曾接到一個需求是,當網頁處在往下滾動狀態時,header是隱藏起來的;而在網頁往上滾動、或網頁已經在最頂端時,header 才會顯示出來。之所以想完成這個效果,可能是想節省空間。因為 header 是讓使用者跳轉到其他頁面的導覽列,而當使用者做出向下滾動網頁的動作時,代表他們需要的是瀏覽後續的網頁。如果在往下滾動時隱藏 header,就能留給使用者更多的螢幕空間去看內容,體驗會更好。

以下是我當時的解法:headroom.js

下滾時隱藏header,上滾時顯示

閱讀全文 »

組隊打王示意圖

打王(被王打)示意圖

楔子

在 2019 年的年中,我在前端的路上陸續做了這些事情:接六角的遠端切版助教、參加 iT 邦幫忙的鐵人賽、以及邊上六角的課程。本來想說寫完鐵人賽 就回家去種田了 就專心上六角的課程,但在十月初、鐵人賽進行到一半的時候,我接到一封神秘的訊息。

這封訊息,讓我踏上了一段長達數個月的旅途。

究竟這封神秘的訊息透露出什麼資訊,以及在後續的路途上會有怎樣的遭遇呢?

讓我們繼續看下去…

閱讀全文 »

六角鼠年鐵人挑戰賽示意圖

前言

六角學院舉辦了一個寫文活動「鼠年全馬鐵人挑戰賽」。如果維持一週一更的習慣,就能根據累積的文章數來獲得獎座/獎狀。我本來就有想要養成寫文的習慣,而六角舉辦了這個活動,就讓我更有想維持這習慣的動力了。以下先打大致的方向,日後再慢慢補上細節。

BTW,胡立也在推一個新的寫文平台,同時也有寫文活動。再考慮一下要不要參加好惹 @@

閱讀全文 »

前言

我目前使用的筆電是 Acer 5750G。我大概從 2011 年開始用它的樣子,用了好幾年。不過在前幾年,就陸陸續續出了一些狀況,像是鍵盤按鍵有些不能按、風扇運轉聲音變大等等。其中一個是 HDMI 接口竟然接上螢幕後竟然沒作用。以下是簡單的排錯文

閱讀全文 »

前言

這陣子有在處理一個專案。剛開始這個專案是開在我的帳號上,大部分的時間也是我在開發。不過,由於 Github 的私人 repo 只能有三個協作者,而後續可能會再加入新的協作帳號進來,所以就在想該怎麼辦。

後來有人提到「诶我 Github 帳號是付費的,應該可以轉給我喔」,於是我就開始研究該怎麼轉換 repo 的 owner 了。

閱讀全文 »

覺得最近做事情沒什麼目標,有點渾渾噩噩。在面對新的一年前,先整理一下自己 2019 年做了些什麼,最後簡單規劃自己在 2020 年想做什麼。

閱讀全文 »

鐵人賽團體趙

圖取自 iT邦幫忙、社長的臉書貼文 https://www.facebook.com/ithelpfans/posts/1548734745299832

一直以來遇到程式問題時,常常會 google 到 IT邦幫忙的文章;到了今天我終於也參賽了。昨天是頒獎典禮,我憑著印象斷斷續續地記錄了一些東西。主要是想記錄一些幹話 想讓大家知道寫程式的人其實都滿幽默 der

閱讀全文 »