Question

我试图在用户在页面上向下滚动100px后显示固定div，并在滚动超过100px到顶部时再次消失。

当div显示为一个很好的过渡时，我想使用0.5s的不透明淡入淡出过渡。

一直尝试这样做，但只有在用户使用此代码滚动时才能看到它出现：

很想听到有解决方案的人的发言。

谢谢！：）

Answer 1

$(window).scroll(function(){
      if($(window).scrollTop()>100){
         $("#theDiv").fadeIn();
      }else{
         $("#theDiv").fadeOut();
      }

});

Answer 2

使其隐藏在页面加载上的好方法是为周围的div CSS类提供display: none;属性。这样，它将在页面最初加载时显示隐藏，并且在页面加载时不会快速淡出。然后，在向下滚动确定的像素数后，您的JavaScript将加载它。这将表现得很干净，而且非常容易实现。

Answer 3

HTML：

<div id="theDiv">Now I'm visible</div>

CSS：

body, html {
    height: 200%;
}

#theDiv{
    top: 30px;
    left: 20px;
    display: none;
    background-color:#FFF000;
    width:200px;
    height:200px;
}

使用Javascript：

$(window).scroll(function(){
      if($(window).scrollTop()>100){
         $("#theDiv").fadeIn();
      }else{
         $("#theDiv").fadeOut();
      }

});

演示：http://jsfiddle.net/waitinforatrain/ZtGK6/3/

Answer 4

$(function() {

    var theDiv = $('#myDiv'),
        scrollPos = $('body').scrollTop();

    if ( scrollPos > 100 ) {

        theDiv.fadeIn(500); // 500 milliseconds

    } else {

        theDiv.fadeOut(500);

    }

});

我无法对此进行测试，您可能必须将if语句放在滚动事件中，以便在滚动时scrollPos var更新。

如何让div在特定高度后淡入？

4 个答案: