首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在向下滚动时更改背景?Wordpress

如何在向下滚动时更改背景?Wordpress
EN

Stack Overflow用户
提问于 2013-01-11 14:59:23
回答 1查看 1.8K关注 0票数 2

我想重现这里使用的特效http://www.ixistore.be/。我的意思是通过向下滚动页面来改变背景颜色。我知道如何在页面上使用静态in和特定数量的元素,但您必须在JS ->中定义in。我喜欢在wordpress中使用它-->这意味着动态。我假设每个帖子都有一些属性"data-bgcolor“,这将被javascript使用。但我不知道该怎么做。

谢谢你的帮助。

How to change the background-color when scrolling down

EN

回答 1

Stack Overflow用户

发布于 2013-01-11 15:10:24

这不是我的逻辑,这些是他们用来改变身体背景的脚本,这是从你提供的链接中获取的。这可能会对你有帮助。

代码语言:javascript
运行
复制
function scrollHandler(e)
{
refreshFocus();
} 

function refreshFocus()
{
var closest_center_dist = 99999;
var $closest_block;

var max_visible_h;
var winner;

$("div.block").each(function(ind, ele)
{

    var $block = $(ele);
    var scrollTop = $(window).scrollTop();
    var ele_y = $block.offset().top - scrollTop;
    var ele_bottom_y = $block.height() + ele_y;
    var ele_h = $block.height();
    var ele_center_y = ele_y + ele_h/2;

    var win_h = $("#win_h_ref").height()//$(window).height();
    var win_center_y = win_h/2;

    var ele_top_cutoff = Math.abs(Math.min(ele_y, 0));// from 0 to ..
    var ele_bottom_cutoff = Math.abs(Math.max(ele_y + ele_h - win_h, 0));// from 0 to ..
    var visible_ele_h = ele_h - ele_top_cutoff - ele_bottom_cutoff;


    var top_center_distance = Math.abs(ele_y - win_center_y);
    var bottom_center_distance = Math.abs(ele_bottom_y - win_center_y);

    var shortest_center_distance = Math.min(top_center_distance, bottom_center_distance);
    if(shortest_center_distance < closest_center_dist)
    {
        closest_center_dist = shortest_center_distance;
        $closest_block = $block;            
    }
});

if($closest_block)
{
    if($closest_block.size() > 0)
    {
        if($closest_block.hasClass("focus") == false)
        {
            $("div.block.focus").removeClass("focus");
            $closest_block.addClass("focus");

            $('#menu li.current').removeClass('current');
            $("#menu li a").each(function()
            {
                if($(this).attr("href") == "#"+$closest_block.attr("id"))
                {
                    $(this).closest("li").addClass("current");
                }
            });

            var $bg = $($closest_block.data("background"));
            var bg_clr = $bg.css("backgroundColor");
            $("body").css({"backgroundColor":bg_clr});

        }           
    }
}

}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14273243

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档