0

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

我很想找到一种方法让它只在用户向下滚动到博客文章之后出现，并且在 1 秒的设定时间延迟之后出现。

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

4

4 回答 4

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;
    }

});
于 2013-02-10T16:46:43.117 回答
1

假设所有博文都有一类博文。为每一个添加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);

            }
        }
    }


});
于 2013-02-10T16:47:20.520 回答
0

当然。您可以使用setTimeout在延迟后执行操作（调用函数），并且可以使用 jQuery 的函数（或其快捷方式， ）scroll非常轻松地挂钩元素（包括整个文档）的事件。所以你可以使用这些东西的组合来让你出现（通过 jQuery's ），例如：onscrolldivshow

// 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);

显然这只是一个概念，但它应该让你走上正确的道路。

于 2013-02-10T16:43:21.747 回答
0

我从 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
    }
});

});

于 2013-02-11T05:11:39.163 回答