[ 網頁教學 ] One Page Scroll 判斷目前所在區塊(4/19更新說明)

標籤: , , , , , ,

 

什麼是 One Page Scroll 呢?

概念類似垂直的幻燈片,只是操控的方式是以滑動(觸控螢幕,ex:手機)/ 滾輪(電腦)來進行,一樣可以點這個點翻動到此頁,也可以用滾輪滾到此頁時知道自己在這頁,他就是這樣的一個功能。

 

我有寫一個範例,請大家下載後,再來說明語法。

範例下載

 

Step1:宣告JQ。

Step2:製作區塊(section)與菜單(menu),分別打上對應與所屬名字。

※data-id可以自己命名,可以命名為 data-section 之類的只要是 data-* 都可以(一定要有黃底那段字)。

為什麼可以這樣?概念如下圖。

總而言之,他就是一個可以被瀏覽器支援的功能,利於於JS上,方便我們更好撰寫XD

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><!--Step1-->
<!--Step2-->
<div class="section" id="A">
    <p>A</p>
</div>
<div class="section" id="B">
    <p>B</p>
</div>
<div class="section" id="C">
    <p>C</p>
</div>
<div class="menu">
    <p data-id="A" class="active">A區</p>
    <p data-id="B">B區</p>
    <p data-id="C">C區</p>
</div>

 

Step3:做好以上設定之後,就可以來講解語法的部份了。

CSS依照個人喜好自行設定~

var sectionIds = {};
   $(".section").each(function () {
       var $this = $(this);
       sectionIds[$this.attr("id")] = $this.first().offset().top;
   });

設定sectionIds為空的。

分別抓取class為section的元素。

再把 section 裡面的 id 指定為 sectionIds。

offset 是抓取相對位子 offest().top 則是抓取高度。

first()字面上的意思,抓取第一個 .section 的相對高度。

 

$(window).scroll(function (event) {

        var scrolled = $(this).scrollTop();

        for (key in sectionIds) {
            if (scrolled >= sectionIds[key]) {
                $(".menu p").removeClass("active");
                var c = $("[data-id=" + key + "]");
                c.addClass("active");
            }
        }

    });

window視窗滾動時執行該事件。

scrolltop是卷軸的位子的高度。

如果卷軸的位子高度>=現在的元素高度則加入active這個class。

key則是sectionIds的id。

以上語法就可以達成滾動到此會亮燈的效果。

 

step4:點擊某元素到達某區塊的語法就不多說明了,有另一篇文章是在講這個語法的作法。

連結支援

$(".menu p").click(function () {
    $(this).addClass("active");
    $(this).siblings().removeClass("active");

    var name = $(this).attr("data-id");
    var id = "#" + name;
    var top = $(id).first().offset().top;
    $('html, body').animate({ scrollTop: top + 'px' }, 300);
});

當 .menu p(選擇器)被點擊的時候

把被點擊的元素+上class

先來了解siblings的意思

按照這句話和語法的對應,我們可以得知

$(this).siblings().removeClass(“active”);

這語法的意思是,找查被點擊元素(this)的所有含有active的class,找到後刪除active class

接著宣告name來抓取(this)的data-id

在把抓到的data-id加上”#”

再把id套用在語法上,這樣就可以點擊之後到達該區塊囉~

 

THX FOR READING #CIAOCHO 4/19

 



相關文章

網頁滑動式手機菜單 (類似APP菜單)   今天要來和大家分享滑動式的手機菜單如何達成,要製作這個功能需要的是CSS和JS概念。 這個菜單類似手機APP的菜單顯示的方式,這樣子的菜單形式使用在網頁上是相當符合使用者經驗...
免費圖片與背景圖 (Free Background)   好久沒有新增文章了,最近稍微偷懶了一陣子,真是不好意思呢。 相信在做網頁設計的時候常常需要一些素材來製作整個網站的風格,而今天介紹的網站素材是可以用於個人行為或是商業化(有經...
刪除 wordpress 自動產生的 p 與 br 如何刪除 wordpress 自動產生的 p 與 br呢?如果有自己架站的話就知道當我們想要用文字編輯器來撰寫自己的版面的時候總是會莫名其妙生出 p 或是 br 導致排版亂掉。當遇到這總情況的時候總是...
CSS Animation 如何用CSS來製作動畫的效果? (上集)... 今天要來介紹 如何用 CSS 製作動畫的效果 ,CSS 中有一個 Animation 的屬性,他的概念和 Flash 的動畫影格差不多,可以設定某個影格的樣子也可以設定持續時間和淡入淡出等效果,只...