jQuery根据滚动位置更改div中的内容 [英] jQuery to change content in div based on scroll position

问题描述

我正在Wordpress中构建博客页面，并添加一个指向当前帖子的侧边栏.我想使用jQuery在当前日期的边栏中填写日期.这只是一个主意，所以我没有任何代码.但是它的功能是这样的:

I am building a blog page in Wordpress and adding a sidebar that points to the current post. I'd like to fill that sidebar with the date of the current post using jQuery. It's only an idea so I don't have any code. But it would function like this:

当您向下滚动页面时，日期(或其他信息)将根据您所在的div改变.它还必须在博客环境中工作，这意味着每个div的高度都可能不同.

As you scroll down the page the date (or other info) would change based on which div you were next to. It also has to work in a blog setting meaning each div can potentially be a different height.

有什么想法吗?

推荐答案

我不知道您想从哪里获取日期，因此，仅举一个例子. Nsubt/"rel =" noreferrer> http://jsfiddle.net/Nsubt/

I do not know where you want to get the date from, so, just an example.. http://jsfiddle.net/Nsubt/

$(window).on("scroll resize", function(){
    var pos=$('#date').offset();
    $('.post').each(function(){
        if(pos.top >= $(this).offset().top && 
           pos.top < $(this).next().offset().top)
        {
            // any way you want to get the date
            $('#date').html($(this).html()); 
            return; //break the loop
        }
    });
});

$(document).ready(function(){
  $(window).trigger('scroll'); // init the value
});
​

右侧的Div可能具有固定位置，或者您可以在使用scroll和resize事件的块中更新其绝对位置.

Div on the right could have a fixed position or you can update its absolute position in the block working with scroll and resize events.

这篇关于jQuery根据滚动位置更改div中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！