滚动浏览页面的特定位置时显示div [英] Make a div appear when scrolling past a certain point of a page

问题描述

我的目标是让一个固定的div出现在页面顶部，一旦有人向页面滚动一定数量的像素。基本上，一旦标题部分不在视图中，这个div就会出现。

我看过类似于我想要的代码;然而，还没有看到任何可以让我轻松修改页面顶部的像素数量（如果可能的话）。

这是一段代码I

  // //从页面顶部获取标题位置，加上其自身的高度
 var startY = $（'header'）。position（）。top + $（'header'）。outerHeight（）; 
 $ b $（window）.scroll（function（）{
 checkY（）; 
}）; 
 
函数checkY（）{
 if（$（window）.scrollTop（）> startY）{
 $（'。fixedDiv'）。slideDown（）; 
} else {
 $（'。fixedDiv'）。slideUp（）; 
 
 
 
 //为了防止用户在页面中间开始时加载，请执行此操作
 checkY（）; 
  

我只是想知道如何让它出现。如果有人知道一段代码已经完成了幻灯片并向下滑动动画，那么将不胜感激，但不是必需的。

解决方案

  window.addEventListener（scroll，function（）{
 if（window.scrollY> 500）{
 $（'。fixedDiv '）.slideDown（）; 
} 
 else {
 $（'。fixedDiv'）。slideUp（）; 
} 
}，false）; 
  

My goal is to make a fixed div appear at the top of a page once someone scrolls a certain amount of pixels down the page. Basically once the header section is out of view, this div will appear.

I've looked at code similar to what I want; however, haven't seen anything that would allow me to easily modify the pixel count from the top of the page (if possible).

Here is a piece of code I saw dealing with making divs appear by scrolling.

// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();

$(window).scroll(function(){
    checkY();
});

function checkY(){
    if( $(window).scrollTop() > startY ){
        $('.fixedDiv').slideDown();
    }else{
        $('.fixedDiv').slideUp();
    }
}

// Do this on load just in case the user starts half way down the page
checkY();

I just want to know how to make it appear. If someone knows of a piece of code already in tact with a slide up and slide down animation, that would be greatly appreciated as well but not required.

解决方案

window.addEventListener("scroll",function() { 
   if(window.scrollY > 500) {
      $('.fixedDiv').slideDown();
   }
   else {
      $('.fixedDiv').slideUp();
   }
},false);

这篇关于滚动浏览页面的特定位置时显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！