Question

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

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

所以它从代码开始但没有显示，然后当用户滚动到#about时，侧面导航会显示出来吗？

Answer 1

基本上，您需要检查用户是否已滚动到或超出div的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();
});

CSS JS显示无改变div

2 个答案: