JDX01(2017):Travel World(2)

三、視窗捲動時,【nav】由透明加色彩,並logo變小

JS設定:因視窗捲動時,需要確認其美化情形,故先設定JS

//視窗捲動
$(window).scroll(function(){
 
  //視窗捲動時,【nav】由透明加色彩,並logo變小
      if ($(window).scrollTop()>0){
          $("#top").addClass("navFixed");}
      else{
          $("#top").removeClass("navFixed");
      }

});     //$(window).scroll end

CSS美化

S1: 移除先前 #top背景色彩

※改為position:fixed時,請注意其變化

  • 當position設定時,預設width:100%即失效,依內容物件大小為寬度
  • 下方物件覆蓋至#top上,故利用z-index調整
  • 沒有position 就沒有 z-index
/* #top===================== */
#top{
    height: 100px;
    /* 加入JS視窗捲動  相關調整 */
    /* background: #3f422c;     變為透明 故移除之*/
    /* position: relative;      改為固定於螢幕上方*/
    position: fixed;
    z-index: 100;
    width: 100%;
}

S2:捲動時,nav美化

【課程中,直接貼上即可】

注意選取器元素情形加上【.navFixed】先後順序及是否加入空格

CSS美化【#top.navFixed】

/*加入JS視窗捲動時,【nav】由透明加色彩,並logo變小 */
#top.navFixed{
  background:#FFDE7D; height: 50px; 
  box-shadow: 0 1px 3px #000;
}
.navFixed #logo{
  width: 150px; height: 75px;top: 0px; filter: none;
}
.navFixed nav a { color: #364F6B; font-size: 18px;}
.navFixed nav a:hover{color: #FC5185; text-shadow: 1px 1px #760f46; }
.navFixed nav{bottom: 10px; }
.navFixed #social{ bottom: 5px; }

SCSS美化【#top.navFixed】

//加入JS視窗捲動時,在#top之下利用加入【class="navFixed"】
//【nav】由透明加色彩,並logo變小
#top.navFixed{
  background:#FFDE7D; height: 50px; 
  box-shadow: 0 1px 3px #000;

  #logo{ width: 150px; height: 75px;top: 0px; filter: none; }
  nav{
    bottom: 10px;
    a {
      color: #364F6B; font-size: 18px;
      &:hover{
        color: #FC5185; text-shadow: 1px 1px #760f46;
      }
    }
  } 
  #social{ bottom: 5px; }
}

 

S3:為了讓捲動時,#logo放大縮小的順暢度加入transition

#logo{
    transition: all .5s;        /*新增*/
}