通过滚动制作一个固定的工具提示消失

Question

我试图创建一个固定到网页底部的消息框，这样当用户滚动，它原地踏步（简单的CSS）。 然而，我想在MessageBox到用户滚动时消失到在网页中的特定点。

例如，如果您有您的网站底部的注册表单，我想创建一个消息框，上面写着“向下滚动上申请”，当用户向下滚动到注册表单的顶部，该消息将消失，或得到由形式掩盖。 因此，当他们向上滚动，则消息将重新出现。

这是不我的实现，但概念的准确图示。

我没有使用JavaScript开发的经验，但希望能有这种现有的方法。我愿意去学习，虽然，这是我想使用。

任何想法？或概念开始学习？

谢谢你们！ （我认为这可能是某些突出的内容，如果他们没有在整个页面滚动或许用户会错过一个真正聪明的方法。）

Answer 1

This 应达到目的（在IE7，Firefox，铬，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.