【JA魔改秘笈】简单三步骤让navbar实现动态效果

本篇文章将介绍如何用三个步骤,实现navbar动态效果(会使用到Javascript哦)



让我们开始吧!

Part 1 - 设定navbar的ID

app/views/common/_navbar.html.erb
<div class="navbar navbar-default navbar-fixed-top" id="navbar" role="navigation">

  (中略)

</div>

设定ID的目的为等下调用Javascript时,可以透过ID找到navbar,並并进行操作。此处将navbar的ID设定为navbar,可自行随需求修改。

Part 2 - 在CSS设定navbar预设属性,及变动后的属性

app/assets/stylesheets/application.scss
.navbar-default {
  background: rgba(0,0,0,0.3);

  &.show_bgcolor {
    background-color: #02061A;
  }
}

background: rgba(0,0,0,0.3);指的是将navbar背景预设为rgb(0,0,0)(黑色)的背景颜色,0.3则为透明度(可设定的值为0~1,0为完全透明、1为不透明)
&.show_bgcolor设定的是待会Javascript调用时的设定,此范例将背景设定为深蓝色

Part 3 - 在Javascript设定navbar的触发行为

app/assets/javascripts/application.js
$(window).scroll(function () {
    if ($(this).scrollTop() > 125) {
        $('#navbar').addClass('show_bgcolor') 
    } else {
        $('#navbar').removeClass('show_bgcolor')
    }
})

$(window).scroll(function () {})指的是当屏幕滚动时,所触发的功能
if ($(this).scrollTop() > 125)指的是当屏幕滚动到125px的高度时,所触发的行为
$('#navbar').addClass('show_bgcolor') 指的是抓取ID为navbar的物件,并加入名为show_bgcolor的CSS属性(也就是Part1为什么要在HTML里面设定ID的原因,这样Javascript才能抓取到对应的物件)

❖ 因此这段Javascript的意思就是,当屏幕向下滚动至125px的高度时,navbar加入show_bgcolor这个CSS属性,将背景色设定为深蓝色;向上滚动到125px高度之上时,移除show_bgcolor这个CSS属性,将背景色改回半透明。 ❖

大功告成!!


实现这功能是不是很简单呢?如果有其他想做的效果也可以依此举一反三,调整CSS或JS来实现。

在Javascript中有许多的行为可以调用,.scroll只是其中一种,各位有兴趣都可以自行钻研,或是将疑问在下方留言 :D

如果我的文章对你有帮助,欢迎打赏,谢谢你的支持! :D

comments powered by Disqus