javascript - CSS JS 显示 none 改变 div

Question

我有一个单传呼机。在那个寻呼机中，我有一个设置为display:none（div 中的固定侧导航）的项目。

滚动到某个 div 时可以显示它吗？

所以它在代码中开始但不显示，然后当用户滚动到#about侧面导航时可以显示吗？

Answer 1

本质上，您需要检查用户是否滚动到或超出了 about 的 div id。首先，您需要建立 div 的当前 Y 值。

//cache about div
var about = $('#about');
//this caches the about div position on window load
var aboutPosition = about.position();

接下来，您需要确定用户滚动了多远。我决定实现这一点的最好方法是使用计时器。您可以使用 scoll 事件，但它对用户浏览器的负担太大，而且计时器在很大程度上无法区分。

//generic timer set to repeat every 10 mili(very fast) 
//with a callback to execute the logic
var checkScrollPos = window.setInterval("scrollTopLogic()",10);

function scrollTopLogic(){
    //if about y position is greater than or equal to the 
    //current window scroll position do something
    if(aboutPosition.y >= $(window).scrollTop()){
        $('nav').show();
        //remove timer since it is no longer needed
        window.clearInterval(checkScrollPos);
    }
}

Answer 2

您可以捕获 div 的滚动事件并像这样显示元素

$("#div").scroll(function() {
   $("#item").show();
});