在800px之后在scrollDown上显示div

Question

当我从页面顶部向下滚动800px后，我想显示一个隐藏的div。到目前为止，我已经有了这个示例，但是我想它需要修改才能达到我想要的目的。

编辑：

[并且当scrollUp且高度小于800px时，此div应该隐藏]

HTML：

<div class="bottomMenu">
  <!-- content -->
</div>

CSS：

.bottomMenu {
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0px;
    z-index: 100;
    opacity: 0;
}

jQuery的：

$(document).ready(function() {
    $(window).scroll( function(){
        $('.bottomMenu').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

Answer 1

如果要在滚动多个像素后显示div，请执行以下操作：

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});



$(document).scroll(function() {

  var y = $(this).scrollTop();

  if (y > 800) {

    $('.bottomMenu').fadeIn();

  } else {

    $('.bottomMenu').fadeOut();

  }

});


body {

  height: 1600px;

}

.bottomMenu {

  display: none;

  position: fixed;

  bottom: 0;

  width: 100%;

  height: 60px;

  border-top: 1px solid #000;

  background: red;

  z-index: 1;

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Scroll down... </p>

<div class="bottomMenu"></div>

它简单但有效。

如果要在滚动多个像素后显示div，

没有jQuery：

myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 800) {
    myID.className = "bottomMenu show"
  } else {
    myID.className = "bottomMenu hide"
  }
};

window.addEventListener("scroll", myScrollFunc);



myID = document.getElementById("myID");



var myScrollFunc = function() {

  var y = window.scrollY;

  if (y >= 800) {

    myID.className = "bottomMenu show"

  } else {

    myID.className = "bottomMenu hide"

  }

};



window.addEventListener("scroll", myScrollFunc);


body {

  height: 2000px;

}

.bottomMenu {

  position: fixed;

  bottom: 0;

  width: 100%;

  height: 60px;

  border-top: 1px solid #000;

  background: red;

  z-index: 1;

  transition: all 1s;

}

.hide {

  opacity: 0;

  left: -100%;

}

.show {

  opacity: 1;

  left: 0;

}


<div id="myID" class="bottomMenu hide"></div>

.scrollY 文档.className 文档.addEventListener文档

如果要在滚动到元素后显示它：

工作实例

$('h1').each(function () {
    var y = $(document).scrollTop();
    var t = $(this).parent().offset().top;
    if (y > t) {
        $(this).fadeIn();
    } else {
        $(this).fadeOut();
    }
});



$(document).scroll(function() {

  //Show element after user scrolls 800px

  var y = $(this).scrollTop();

  if (y > 800) {

    $('.bottomMenu').fadeIn();

  } else {

    $('.bottomMenu').fadeOut();

  }



  // Show element after user scrolls past

  // the top edge of its parent

  $('h1').each(function() {

    var t = $(this).parent().offset().top;

    if (y > t) {

      $(this).fadeIn();

    } else {

      $(this).fadeOut();

    }

  });

});


body {

  height: 1600px;

}

.bottomMenu {

  display: none;

  position: fixed;

  bottom: 0;

  width: 100%;

  height: 60px;

  border-top: 1px solid #000;

  background: red;

  z-index: 1;

}

.scrollPast {

  width: 100%;

  height: 150px;

  background: blue;

  position: relative;

  top: 50px;

  margin: 20px 0;

}

h1 {

  display: none;

  position: absolute;

  bottom: 0;

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Scroll Down...</p>

<div class="scrollPast">

  <h1>I fade in when you scroll to my parent</h1>



</div>

<div class="scrollPast">

  <h1>I fade in when you scroll to my parent</h1>



</div>

<div class="scrollPast">

  <h1>I fade in when you scroll to my parent</h1>



</div>

<div class="bottomMenu">I fade in when you scroll past 800px</div>

请注意，您无法获取设置为display: none;的元素的偏移量，而是获取元素父元素的偏移量。

如果要在每次滚动时导航或div导航或停靠在页面顶部，并在向上滚动时取消导航/取消导航，请停靠：

工作实例

$(document).scroll(function () {
    //stick nav to top of page
    var y = $(this).scrollTop();
    var navWrap = $('#navWrap').offset().top;
    if (y > navWrap) {
        $('nav').addClass('sticky');
    } else {
        $('nav').removeClass('sticky');
    }
});

#navWrap {
    height:70px
}
nav {
    height: 70px;
    background:gray;
}
.sticky {
    position: fixed;
    top:0;
}



$(document).scroll(function () {

    //stick nav to top of page

    var y = $(this).scrollTop();

    var navWrap = $('#navWrap').offset().top;

    if (y > navWrap) {

        $('nav').addClass('sticky');

    } else {

        $('nav').removeClass('sticky');

    }

});


body {

    height:1600px;

    margin:0;

}

#navWrap {

    height:70px

}

nav {

    height: 70px;

    background:gray;

}

.sticky {

    position: fixed;

    top:0;

}

h1 {

    margin: 0;

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas,

  imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum

  oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>

<div id="navWrap">

  <nav>

    <h1>I stick to the top when you scroll down and unstick when you scroll up to my original position</h1>



  </nav>

</div>

<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas,

  imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum

  oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>