jquery “做頁面滾動到某屏時改變狀態標題” 所用知識點記錄

瀏覽器滾動條滾動時觸發事件

    //瀏覽器滾動條滾動時觸發事件
    $(window).scroll(function(){});

瀏覽器視窗大小改變時觸發事件

    //瀏覽器視窗大小改變時觸發事件
    $(window).resize(function(){});

監聽所有錨點連結實現平滑移動

    //監聽所有錨點連結實現平滑移動
    $('a[href*=#],area[href*=#]').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                //為提升使用者體驗，做出演算法改進 start
                var clientHeight    =    document.body.clientHeight;    //瀏覽器可視高度
                targetOffset    =    targetOffset-(clientHeight/2)+100;
                //end
                $('html,body').stop(true).animate({
                    scrollTop: targetOffset
                },
                1000);
            return false;
            }
        }
    });

獲取某元素基於當前瀏覽器視窗底部的距離

//獲取某元素基於當前瀏覽器視窗底部的距離
function get_element_window_bottom(choose){
    if(choose=='') return false;
    mTop = $(choose)[0].offsetTop;
    sTop = $(window).scrollTop();
    result = mTop - sTop;
    //增加一個演算法提高使用者體驗度
    result    =    result+parseInt(document.body.clientHeight/2);
    return     result;
}

效果例項圖