jQuery在滾動時查看元素

此jQuery代碼片段可將元素保留在頁面滾動時。 演示顯示了對右側側邊欄AD的影響。 該代碼既作為獨立腳本，又是可重複使用的jQuery插件。 最後，一個常見問題解答解決了常見的jquery滾動問題。

>代碼（獨立）：

<code class="language-javascript">//keep element in view
(function($) {
    $(document).ready(function() {
        var elementPosTop = $('#jq4u-sidebar-ads').position().top;
        $(window).scroll(function() {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            if (wintop > elementPosTop) {
                $('#jq4u-sidebar-ads').css({ "position": "fixed", "top": "10px" });
            } else {
                $('#jq4u-sidebar-ads').css({ "position": "inherit" });
            }
        });
    });
})(jQuery);</code>

代碼（jQuery插件）：>

<code class="language-javascript">/**
 * jQuery keep element in view plugin.
 *
 * @author      Sam Deering
 * @copyright   Copyright (c) 2012 jQuery4u
 * @license     http://jquery4u.com/license/
 * @link        http://jquery4u.com
 * @since       Version 1.0
 * @notes       Plugin only works on scroll down elements.
 */

(function($) {
    $.fn.keepElementInView = function() {
        var elemPosTop = this.position().top;
        $(window).scroll(function() {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            if (wintop > elemPosTop) {
                this.css({ "position": "fixed", "top": "10px" });
            } else {
                this.css({ "position": "inherit" });
            }
        });
        return this;
    };

    $(document).ready(function() {
        $('#jq4u-sidebar-ads').keepElementInView();
    });
})(jQuery);</code>

常見問題（常見問題解答）：

> >本節提供了有關jQuery元素視圖滾動滾動的常見問題的簡潔答案，包括用於動畫和即時滾動的技術，水平滾動，視口檢查以及按鈕觸發的滾動。 代碼示例稍微重新格式化以提高可讀性。

Q1：動畫滾動到元素？

>

<code class="language-javascript">$('html, body').animate({ scrollTop: $("#elementID").offset().top }, 2000);</code>

Q2：即時滾動到元素？

<code class="language-javascript">$('html, body').scrollTop($("#elementID").offset().top);</code>

Q3：水平滾動到元素？

>

<code class="language-javascript">$('html, body').animate({ scrollLeft: $("#elementID").offset().left }, 2000);</code>

Q4：檢查元素是否在fiewport中？

Q5：滾動到按鈕單擊按鈕？

<code class="language-javascript">function isInViewport(element) {
  let elementTop = $(element).offset().top;
  let elementBottom = elementTop + $(element).outerHeight();
  let viewportTop = $(window).scrollTop();
  let viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
}</code>

>

以上是jQuery在滾動時查看元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！