1

我正在尝试创建一个固定在网页底部的消息框，因此当用户滚动时，它会保持原样（简单的 css）。但是，当用户滚动到网页中的某个点时，我希望消息框消失。

例如，如果您的网站底部有一个注册表单，我想创建一个消息框，上面写着“向下滚动以注册”，当用户向下滚动到注册表单的顶部时，消息会消失，或者被表格掩盖。因此，当他们向上滚动时，该消息会重新出现。

这不是我的实现，而是对该概念的准确说明。

我没有任何使用 Javascript 开发的经验，但希望有一个现有的方法。不过我愿意学习，这是我想使用的东西。

有什么想法吗？还是开始学习的概念？

多谢你们！（我认为这可能是一种非常聪明的方法，可以突出显示如果用户不滚动整个页面可能会错过的某些内容。）

4

1 回答 1

4

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.

于 2009-02-26T01:48:11.353 回答