스크롤하여 고정 툴팁을 사라집니다

Question

웹 페이지의 하단에 고정 된 메시지 상자를 만들려고하므로 사용자가 스크롤하면 (간단한 CSS) 머무르고 있습니다. 그러나 사용자가 웹 페이지의 특정 지점으로 스크롤하면 메시지 상자가 사라지기를 바랍니다.

예를 들어, 사이트 하단에 가입 양식이있는 경우 "가입으로 스크롤 스크롤"을 읽고 사용자가 가입 양식의 상단으로 스크롤하면 메시지 상자를 작성하려고합니다. 사라지거나 양식으로 덮여 있습니다. 그래서 그들이 스크롤하면 메시지가 다시 나타납니다.

이것은 내 구현이 아니라 개념의 정확한 그림입니다.

나는 JavaScript로 발전한 경험이 없었지만이를위한 기존 방법이 있기를 바랐습니다. 그래도 기꺼이 배우려고합니다. 이것은 내가 사용하고 싶은 것입니다.

이견있는 사람? 아니면 학습을 시작하는 개념?

감사합니다! (이것은 전체 페이지를 스크롤하지 않으면 사용자가 놓칠 수있는 특정 콘텐츠를 강조하는 정말 영리한 방법이라고 생각합니다.)

Answer 1

This 트릭을 수행해야합니다 (IE7, Firefox, Chrome, Safari에서 테스트).

jQuery를 사용하고 표시되는 즉시 요소를 보여줍니다. 이것은 코드입니다.

$(document).ready(function() {
    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
    }
    // the element to look for
    var myelement = $('#formcontainer');
    // the element to hide when the above is visible
    var mymessage = $('#mymessage');
    $(window).scroll(function() {
        if(isScrolledIntoView(myelement)) {
            mymessage.hide();
        } else {
            mymessage.show();
        }
    });
});

메시지가 숨겨지기 전에 전체 요소가 표시되기를 원한다면 교체하십시오. isScrolledIntoView 위에서 이것으로 :

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
      && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
}

이 두 기능 모두에 대한 크레딧은 this question.