jQuery는 스크롤 할 때 요소를 볼 수 있습니다

이 jQuery 코드 스 니펫은 페이지가 스크롤하는 것으로 보이는 요소를 유지합니다. 데모는이 효과가 오른쪽 사이드 바 광고에 나타납니다. 이 코드는 독립형 스크립트와 재사용 가능한 jQuery 플러그인으로 표시됩니다. 마지막으로 FAQ 섹션은 일반적인 jQuery 스크롤 질문을 다룹니다

코드 (독립형) :

코드 (jQuery 플러그인) :

자주 묻는 질문 (faqs) : 이 섹션에서는 애니메이션 및 인스턴트 스크롤링 기술, 수평 스크롤, 뷰포트 체크 및 버튼 트리거 스크롤링을 포함하여 jQuery 요소보기 스크롤에 대한 일반적인 질문에 대한 간결한 답변을 제공합니다. 코드 예제는 가독성 향상을 위해 약간 재구성됩니다 Q1 : ANIMATE SCROLL to ELEMENT?

<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>

Q2 : 요소에 즉시 두루마리? Q3 : 요소에 수평 스크롤?

<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>

Q4 : 요소가 뷰포트에 있는지 확인하십시오? Q5 : 버튼 클릭의 요소로 스크롤?

위 내용은 jQuery는 스크롤 할 때 요소를 볼 수 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!