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

我试图创建一个固定在网页底部的消息框，所以当用户滚动时，它仍然处于放置状态（简单的css）。但是，当用户滚动到网页中的某个点时，我希望消息框消失。通过滚动使固定的工具提示消失

例如，如果您的网站底部有注册表单，则需要创建一个“向下滚动至注册”的消息框，并且当用户滚动至注册顶部时形式，消息将消失，或被表单掩盖。所以当他们向上滚动时，消息会重新出现。

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

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

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

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

来源

2009-02-26 Sophisticake

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-26 01:48:11

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

回答

相关问题