仅通过滚动更改引用每个菜单项的背景图像

Posted

技术标签:

【中文标题】仅通过滚动更改引用每个菜单项的背景图像【英文标题】:Changing background image referred to each menu item only by scrolling 【发布时间】:2017-01-03 23:28:05 【问题描述】:

我正在开发一个 wordpress 主题,它具有通过悬停菜单项来更改背景图像的功能(每个菜单项都附加了不同的图像)。在移动设备上,我想通过滚动来改变背景图片,这样观众就不需要点击每个菜单来改变背景图片。

这是我实现的通过悬停改变背景的方法。 http://codepen.io/nummelin/pen/kzaso

// When any of the a's inside of sidebarContainer are hovered
$( ".sidebarContainer a" ).hover(function() 

// Removes all previous classes but keeps sidebar1
$('.sidebar1').removeClass().addClass('sidebar1');

// Splits up the URL on the current href
var URI = $(this).attr('href').split('/');
console.log(URI[2]);

// Applies the last part of the URL to sidebar1 
$('.sidebar1').addClass(URI[2]);
);

通过滚动来实现,我想我需要一个如下图所示按位置悬停菜单项的功能。

有没有人知道如何实现这一目标?我一直在探索与此类似的插件或示例代码,但没有找到任何... 任何建议将不胜感激。

【问题讨论】:

您是否已经尝试过 onscroll 事件? 感谢您的评论!还没有。我对 Jquery 也很陌生……看来 .scrollTop() 可以解决问题!我试试看! 是的,你应该这样做。只需创建一个函数来获取菜单项的偏移顶部。这样,您就不会重复代码。 【参考方案1】:

好的,这就是我写的代码。希望能帮助到你。我研究过交叉淡入淡出效果,但这并不容易。如果有人试过,请教我怎么做。

Codepen 上的演示: http://codepen.io/bavavava/pen/rrNpaY

jQuery(function($)
  'use strict';

$(document).ready(function()

    var elem = $('li.list-item'),
        $listPosition = $.map(elem, function(el, i)  return $(el).offset().top; ),
        $listURL = $.map(elem, function(el,i)  return $(el).find('a').attr('href'); ),
        $bg = $('.container');
        console.log($listPosition);
        console.log($listURL);

    //PRELOAD IMAGES
    $.fn.preload = function() 
        this.each(function()
            $('<img/>')[0].src = this;
        );
    

    $($listURL).preload();

    //SCROLL CHANGE
    $(window).on('scroll', function () 
        var windowScroll = $(this).scrollTop();

        $.each($listPosition, function (i, pos) 

            if (windowScroll >= pos) 
                $bg.css('background', 'url(' + $listURL[i] + '), black no-repeat center center fixed');
            

        );
    );

);

);

【讨论】:

以上是关于仅通过滚动更改引用每个菜单项的背景图像的主要内容,如果未能解决你的问题,请参考以下文章

当用户滚动时,在 WP7 上更改全景图的背景图像

更改 navigationView 的单个特定菜单项的背景颜色

通过 Jquery 仅更改背景图像的 y 位置

css 另一个更改菜单项的背景颜色,填充和悬停颜色的示例。

jQuery 将背景图像设置为菜单悬停状态和菜单活动状态

突出显示当前所选导航菜单项的背景