Question

我在wordpress中的每个博文后都有一个特殊的DIV内容框。

我希望找到一种方法，只有在用户向下滚动浏览博客文章后，以及经过1秒的设定时间延迟后才能显示。

有没有办法用javascript或jquery做到这一点？

Answer 1

尝试以下代码。您可以在此jsfiddle

中对其进行测试

  $("#div1").hide();
var windowHeight = $(window).height();
//alert(windowHeight);
var divHeight = $("#div0").height();
//var alert(divHeight);
var divBottomPos = $("#div0").offset().top + divHeight; //alert(divBottomPos);

var divIsShowing = false;
$(document).scroll(function () {
    var scrollPos = $(this).scrollTop();
    var bottomPageScrollPos = scrollPos + windowHeight;
    //alert(bottomPageScrollPos);
    if ((bottomPageScrollPos > divBottomPos) && (!divIsShowing)) {
        $("#div1").delay(1000).show(0);
        divIsShowing = true;
    } else if ((bottomPageScrollPos < divBottomPos) && (divIsShowing)) {
        $("#div1").hide();
        divIsShowing = false;
    }

});

Answer 2

假设所有博客帖子都有一类博文。向每个人添加display:none的样式。然后这就是实现它的代码。

$(function(){
    var $blogs = $('.blogpost');

    $(window).scroll(function(){

     var windowTop = $(window).scrollTop();
     var windowBottom = windowTop + $(window).height();

        $blogs.each(function(){
            var elemTop = $(this).offset().top;
            var elemBottom = elemTop + $(this).height();

            if(windowBottom > elemBottom){
                setTimeout(function(){
                    $(this).show();
                }, 1000);

            }
        }
    }


});

Answer 3

不确定。您可以在延迟后使用setTimeout执行操作（调用函数），并且可以使用jQuery {{3}轻松地挂钩元素的scroll事件（包括整个文档）函数（或其快捷方式，on）。因此，您可以使用这些内容的组合来显示div（通过jQuery的show），例如：

// At the end of your page, just before the closing </body> tag
(function($) {
    var timer;

    // Set up the timer and scroll event handler
    timer = setTimeout(showDiv, 2000); // 2000 = two seconds
    $(document.body).on('scroll', handleScroll);

    // Show the div, and cancel the scroll event handler or timer
    function showDiv() {
        clearTimeout(timer);
        $(document.body).off('scroll', handleScroll);
    }

    // Handle the scroll event    
    function handleScroll() {
        // Check to see if the body has scrolled up past the top of the article
        if ($(this).scrollTop() > $("#thearticle").offset().top) {
            showDiv();
        }
    }

})(jQuery);

显然这只是概念，但它应该让你走的正确。

Answer 4

我发现这是有效的，来自SO的另一页。

但是我想知道是否有办法让它激活，比如scrollTop函数高出200像素。

现在当用户滚动到第一个DIV的绝对开始时它会激活，但是当用户来到DIV的底部时，我宁愿能够激活它。

$(document).ready( function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
    if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
        $("#dvid").show(); //reached the desired point -- show div
    }
});

}）;

如何在设定的时间后以及用户滚动超过某个点后显示DIV

4 个答案: