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.

通过滚动使固定的工具提示消失

1 个答案: