在800px之后在scrollDown上显示div

Question 1

我要从页面顶部向下滚动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);
            }
        }); 
    });
});

这是我当前代码的小提琴。

Question 2

如果要在滚动多个像素后显示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>

Expand snippet

它简单但有效。

.scroll（）的文档 .scrollTop（）的
 文档

如果要在滚动多个像素后显示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>

Expand snippet

.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>

Expand snippet

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

.each（）的
 文档 .parent（）的文档.offset（）的
 文档

如果您想在每次滚动时导航或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>

Expand snippet

Question 3

您正在那里进行一些操作。一，为什么要上课？您实际上在页面上有多个吗？CSS建议您不要这样做。如果不是，则应使用ID-在CSS和jQuery中同时选择将更快：

<div id=bottomMenu>You read it all.</div>

其次，CSS中发生了一些疯狂的事情-特别是z-index应该只是一个数字，而不是以像素为单位。它指定此标签位于哪个层上，每个较高的数字都靠近用户（或换句话说，在z索引较低的标签上方/包含该标签）。

您尝试制作的动画基本上是.fadeIn（），因此只需将div设置为显示：none; 首先使用.fadeIn（）对其进行动画处理：

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

.fadeIn（）的工作方式是先执行display :（无论该标签的显示属性是什么），不透明度为0，然后逐渐提高不透明度。

完整的工作示例：

http://jsfiddle.net/b9chris/sMyfT/

CSS：

#bottomMenu {
    display: none;
    position: fixed;
    left: 0; bottom: 0;
    width: 100%; height: 60px;
    border-top: 1px solid #000;
    background: #fff;
    z-index: 1;
}

JS：

var $win = $(window);

function checkScroll() {
    if ($win.scrollTop() > 100) {
        $win.off('scroll', checkScroll);
        $('#bottomMenu').fadeIn(2000);
    }
}

$win.scroll(checkScroll);

Question 4

您也可以这样做。

$(window).on("scroll", function () {
   if ($(this).scrollTop() > 800) {
      #code here
   } else {
      #code here
   }
});

Question 5

横行霸 $(window).scrollTop()

我发现的是，只有在滚动条实际可见并可以运行时，才能成功调用上面提供的解决方案中的功能（在整个论坛中有很多这样的示例-都运行良好）。

如果（我可能曾作过愚蠢的尝试）如果您希望实现这种功能，并且还希望（例如在本次讨论中）实现$(window).scrollTop()没有滚动条的极简“干净的屏幕” ，那么它将无法正常工作。

它可能是编程的基础，但是我花了很长时间才弄清楚这一点，所以我认为我应该提倡任何其他新手。

如果有人可以就如何克服这个问题或更多的见解提供一些建议，请随时回复，因为我不得不在这里显示/隐藏onmouseover / mouseleave来代替

CollyG，可以长期参加节目。