Question

我试图找到一种方法来添加和删除固定元素的类，当每个包含类，＆＃39; .dark＆＃39;的div到达页面顶部时。

我在这里有一个工作示例，适用于＆＃39; .dark＆＃39;的第一个实例。

但我似乎无法让它适用于班级的第二个实例。

代码：

jQuery(document).ready(function(){
var hieghtThreshold = $(".dark").offset().top;
var hieghtThreshold_end  = $(".dark").offset().top +$(".dark").height() - 25 ;
    $(window).scroll(function() {

            $('.dark').each(function() {

            var scroll = $(window).scrollTop();
            if (scroll >= hieghtThreshold && scroll <=  hieghtThreshold_end ) {
                $('header').removeClass('active');
            }
            else {
                $('header').addClass('active');
            }

            });
    });
});

任何人都可以识别我在这里失踪的东西吗？

Answer 1

找到具有所需坐标的元素可能更容易。我们将搜索位于徽标下方的元素。

var searchClass = 'dark';
var logoHeader = $('header');
var height = logoHeader.height();
$(window).scroll(function() {
        var elem = document.elementFromPoint(0,height);
        var eClass = $(elem).attr('class');
        classes = (eClass == undefined ? [] : eClass.split(' '));
        (classes.indexOf(searchClass) > -1 ? 
            logoHeader.addClass('active') :
            logoHeader.removeClass('active'));                  
    });
});

https://jsfiddle.net/wLqkb5yc/7/

PS。怎么测试？这是文件，我添加了@media（最大宽度：480px），如果屏幕小于480px，那么标题元素将变为60px，脚本将确定其高度并且还将正确地确定坐标。 https://www.dropbox.com/s/k2s8hz65g7xzeck/dark.html?dl=0

切换到达页面顶部的每个div的Class

1 个答案: