滚动经过页面的某个点时显示 div [英] Make a div appear when scrolling past a certain point of a page

问题描述

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

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

这是我看到的一段代码，用于通过滚动显示 div.

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屋！