scrollTop

scrollTop

指獲取捲軸相對於其頂部的偏移值，很抽象的說法吧！講直白一點就是捲出視窗頂端的高度。

scrollTop- 應用

$(window).scroll(function () {
    $('#Msg').text($(this).scrollTop());
});

$('#BtnTop').click(function () {
    $('html').stop(true, false).animate({ scrollTop: 0 }, 800);
});

offset

sticky

position 設定為 fixed 後，top 為 0。

$(window).scroll(function () {
    var dY = $(this).scrollTop();
    if (dY > $('#Adv').offset().top) {
        $('#Adv').addClass('js-fixedAdv');
    }
    if (dY < $('#Header').height() + $('#Sidebar').height() + 20) {
        $('#Adv').removeClass('js-fixedAdv');
    }
});

DOM Traversal

根據相對於其他元素的關係來選取 HTML 元素。可以從當下的元素開始，輕鬆地向上（父層）、向下（子 層）、水平（同層）選取，所以被稱之為 DOM Traversal。

DOMTraversal

$('.now').click(function () {
    $(this).parent().siblings().has('li').css('background-color', 'yellowgreen');
});

輪播效果

setInterval

var index = 0;
var picInterval;
var $slide = $('#Slide');
var $slideItems = $slide.find('.img__inner');
var slideItemWidth = $slide.width();
var duration = 2000;
picInterval = setInterval(setSlide, duration);
$slide.hover(function () {
    clearInterval(picInterval);
}, function () {
    picInterval = setInterval(setSlide, duration);
});
function setSlide() {
    if (index < 4) {
        index++;
    } else {
        index = 0;
    }
    $slideItems.css({
        left: -index * slideItemWidth
    });
}

setInterval-2

var index = 0;
var picInterval;
var $slide = $('#Slide');
var $slideItems = $slide.find('.img__inner');
var slideItemWidth = $slide.width();
var duration = 2000;
var $pagination = $('#Pagination');
var $paginationItem = $pagination.find('.pagination__item');
$paginationItem.eq(index).addClass('js-pagination__item');
picInterval = setInterval(doCalc, duration);
$slide.hover(function () {
    clearInterval(picInterval);
}, function () {
    picInterval = setInterval(doCalc, duration);
});
$paginationItem.click(function(){
    index = $(this).index();
    setSlide();
});
function doCalc(){
    if (index < 4) {
        index++;
    } else {
        index = 0;
    }
        setSlide();
    }
function setSlide() {
    $slideItems.css({ left: -index * slideItemWidth });
    $paginationItem.eq(index).addClass('js-pagination__item')
    .siblings().removeClass('js-pagination__item');
}

捲動網頁應用

scroll

var dY, $win = $(window);
$win.scroll(function () {
    var $this = $(this);
    dY = $(this).scrollTop();
    if (dY > $('#Js .ani-fadeIn-up').offset().top - $this.height() / 2) {
        $('#Js .ani-fadeIn-up').addClass('js-ani-fadeIn-up');
    } else {
        $('#Js .ani-fadeIn-up').removeClass('js-ani-fadeIn-up');
    }
    if (dY > $('#FrontEnd .ani-fadeIn-up').offset().top - $this.height() / 2) {
        $('#FrontEnd .ani-fadeIn-up').addClass('js-ani-fadeIn-up');
    } else {
        $('#FrontEnd .ani-fadeIn-up').removeClass('js-ani-fadeIn-up');
    }
    if (dY > $('#WebPack .ani-fadeIn-up').offset().top - $this.height() / 2) {
        $('#WebPack .ani-fadeIn-up').addClass('js-ani-fadeIn-up');
    } else {
        $('#WebPack .ani-fadeIn-up').removeClass('js-ani-fadeIn-up');
    }
    if (dY > $('#Oop .ani-fadeIn-up').offset().top - $this.height() / 2) {
        $('#Oop .ani-fadeIn-up').addClass('js-ani-fadeIn-up');
    } else {
        $('#Oop .ani-fadeIn-up').removeClass('js-ani-fadeIn-up');
    }
    if (dY > $('#React .ani-fadeIn-up').offset().top - $this.height() / 2) {
        $('#React .ani-fadeIn-up').addClass('js-ani-fadeIn-up');
    } else {
        $('#React .ani-fadeIn-up').removeClass('js-ani-fadeIn-up');
    }
    if (dY > $('#Vue .ani-fadeIn-up').offset().top - $this.height() / 2) {
        $('#Vue .ani-fadeIn-up').addClass('js-ani-fadeIn-up');
    } else {
        $('#Vue .ani-fadeIn-up').removeClass('js-ani-fadeIn-up');
    }
    if (dY > $('#Js .ani-fadeIn-left').offset().top - $this.height() / 2) {
        $('#Js .ani-fadeIn-left').addClass('js-ani-fadeIn-left');
        $('#Js .ani-fadeIn-right').addClass('js-ani-fadeIn-right');
    } else {
        $('#Js .ani-fadeIn-left').removeClass('js-ani-fadeIn-left');
        $('#Js .ani-fadeIn-right').removeClass('js-ani-fadeIn-right');
    }
    if (dY > $('#FrontEnd .ani-fadeIn-left').offset().top - $this.height() / 2) {
        $('#FrontEnd .ani-fadeIn-left').addClass('js-ani-fadeIn-left');
        $('#FrontEnd .ani-fadeIn-right').addClass('js-ani-fadeIn-right');
    } else {
        $('#FrontEnd .ani-fadeIn-left').removeClass('js-ani-fadeIn-left');
        $('#FrontEnd .ani-fadeIn-right').removeClass('js-ani-fadeIn-right');
    }
    if (dY > $('#WebPack .ani-fadeIn-left').offset().top - $this.height() / 2) {
        $('#WebPack .ani-fadeIn-left').addClass('js-ani-fadeIn-left');
        $('#WebPack .ani-fadeIn-right').addClass('js-ani-fadeIn-right');
    } else {
        $('#WebPack .ani-fadeIn-left').removeClass('js-ani-fadeIn-left');
        $('#WebPack .ani-fadeIn-right').removeClass('js-ani-fadeIn-right');
    }
    if (dY > $('#Oop .ani-fadeIn-left').offset().top - $this.height() / 2) {
        $('#Oop .ani-fadeIn-left').addClass('js-ani-fadeIn-left');
        $('#Oop .ani-fadeIn-right').addClass('js-ani-fadeIn-right');
    } else {
        $('#Oop .ani-fadeIn-left').removeClass('js-ani-fadeIn-left');
        $('#Oop .ani-fadeIn-right').removeClass('js-ani-fadeIn-right');
    }
    if (dY > $('#React .ani-fadeIn-left').offset().top - $this.height() / 2) {
        $('#React .ani-fadeIn-left').addClass('js-ani-fadeIn-left');
        $('#React .ani-fadeIn-right').addClass('js-ani-fadeIn-right');
    } else {
        $('#React .ani-fadeIn-left').removeClass('js-ani-fadeIn-left');
        $('#React .ani-fadeIn-right').removeClass('js-ani-fadeIn-right');
    }
    if (dY > $('#Vue .ani-fadeIn-left').offset().top - $this.height() / 2) {
        $('#Vue .ani-fadeIn-left').addClass('js-ani-fadeIn-left');
        $('#Vue .ani-fadeIn-right').addClass('js-ani-fadeIn-right');
    } else {
        $('#Vue .ani-fadeIn-left').removeClass('js-ani-fadeIn-left');
        $('#Vue .ani-fadeIn-right').removeClass('js-ani-fadeIn-right');
    }
});

scroll

var dY, $win = $(window);
$win.scroll(function () {
var $this = $(this);
dY = $(this).scrollTop();
var items = $('.ani-fadeIn-up');
for (var i = 0, len = items.length; i < len; i++) {
    var $item = $(items[i]);
    if (dY > $item.offset().top - $this.height() / 2) {
        $item.addClass('js-ani-fadeIn-up');
    } else {
        $item.removeClass('js-ani-fadeIn-up');
    }
}
var items = $('.ani-fadeIn-left');
for (var i = 0, len = items.length; i < len; i++) {
    var $item = $(items[i]);
    if (dY > $item.offset().top - $this.height() / 2) {
        $item.addClass('js-ani-fadeIn-left');
    } else {
        $item.removeClass('js-ani-fadeIn-left');
    }
}
var items = $('.ani-fadeIn-right');
for (var i = 0, len = items.length; i < len; i++) {
    var $item = $(items[i]);
    if (dY > $item.offset().top - $this.height() / 2) {
        $item.addClass('js-ani-fadeIn-right');
    } else {
        $item.removeClass('js-ani-fadeIn-right');
    }
}
});

scroll

var dY, $win = $(window),
aniArr = ['ani-fadeIn-up', 'ani-fadeIn-left', 'ani-fadeIn-right'];
$win.scroll(function () {
    var $this = $(this);
    dY = $(this).scrollTop();
    for (var i = 0, aniArrLen = aniArr.length; i < aniArrLen; i++) {
        var items = $('.' + aniArr[i]);
        for (var j = 0, itemLen = items.length; j < itemLen; j++) {
            var $item = $(items[j]);
            if (i === 0) {
                if (dY > $item.offset().top - $this.height() / 2) {
                    $item.addClass('js-ani-fadeIn-up');
                } else {
                    $item.removeClass('js-ani-fadeIn-up');
                }
            } else if (i === 1) {
                if (dY > $item.offset().top - $this.height() / 2) {
                    $item.addClass('js-ani-fadeIn-left');
                } else {
                    $item.removeClass('js-ani-fadeIn-left');
                }
                } else if (i === 2) {
                if (dY > $item.offset().top - $this.height() / 2) {
                    $item.addClass('js-ani-fadeIn-right');
                } else {
                    $item.removeClass('js-ani-fadeIn-right');
                }
            }
        }
    }
});

var dY, $win = $(window),
aniArr = ['ani-fadeIn-up', 'ani-fadeIn-left', 'ani-fadeIn-right'];
$win.scroll(function () {
    var $this = $(this);
    dY = $(this).scrollTop();
    for (var i = 0, aniArrLen = aniArr.length; i < aniArrLen; i++) {
    var items = $('.' + aniArr[i]);
        for (var j = 1, itemLen = items.length; j < itemLen; j++) {
        var $item = $(items[j]);
            if (dY > $item.offset().top - $this.height() / 2) {
            $item.addClass('js-' + aniArr[i]);
            } else {
            $item.removeClass('js-' + aniArr[i]);
            }
        }
    }
});