iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

30天30個前端任務系列 第 18

#18. Fixed Navbar(原生JS版)

Navbar是每個前端心手都會練習到的部分,本日任務另外添加一個小小的效果:下拉網頁時改變Navbar樣式。實作請參考CodePen

實作邏輯 & 程式碼

JS部分其實很簡單:就是在window掛上監聽器,監聽scroll行為。
如果scroll在Y軸的長度達到預期的數字,就改變nav的屬性。

const nav = document.querySelector('.nav')
window.addEventListener('scroll', fixNav)

function fixNav() {
    // 若視窗在Y軸的移動長度大於nav高度+150px時,就為nav加上.active選擇器
    if(window.scrollY > nav.offsetHeight + 150) {
        nav.classList.add('active')
    } else {
        nav.classList.remove('active')
    }
}

您可以在codepen當中console.log window.scrollY和nav.offsetHeight,查看實際的觸發點是否符合程式碼:
https://ithelp.ithome.com.tw/upload/images/20210920/201305347QzlKmsm8E.png


SCSS部分(節錄)
這裡有運用偽元素和z-index屬性,做出一個濾鏡效果,讓文字從背景跳出來。

.mainTitle {
  background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  height: 100vh;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  margin-bottom: 20px;
  z-index: -2;

  h1 {
    font-size: 46px;
    margin: -20px 0 20px;
  }

  p {
    font-size: 20px;
    letter-spacing: 1px;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }
}

上一篇
#17. Image Carousel(原生JS版)
下一篇
#19. 3D Background Boxes
系列文
30天30個前端任務19

尚未有邦友留言

立即登入留言