Question

我已经做了很多研究，试图找到解决这个问题的方法。我有一个项目，我正在使用parallax（magicScroll）。我有一个汉堡包图标（显示/隐藏菜单），但是这个图标是黑色的，我需要根据图像背景更改颜色。因此，如果我有一个黑暗的图像作为背景，汉堡包图标应该是白色的，如果我有一个白色背景，图标应该是黑色的。

我尝试了很多方法，但是我使用的是视差。所以我在编写函数时遇到问题，需要帮助。我的菜单图标（.hamburger）固定在标题（位置：固定），我有以下部分。问题是：如何识别视口中的部分（可见）以及如何在菜单图标（.hamburger）中添加/删除classe。

我正在尝试这样的事情：

 var setMenu = function() {
  if($('#section-3').inViewport()) {
    $('.hamburger').addClass('navwhite')
  } else {
    $('.hamburger').removeClass('navwhite')
  };
};

我正在尝试这样的测试，但没有运气。 :(一旦我的＃section-3击中了视口的顶部，因为视差，我的ID永远不会离开这个位置，所以我需要帮助来学习如何做到这一点。

提前致谢！

Answer 1

将检查页面是否已滚动到或大于“section-3”部分，然后将添加“navwhite”类，否则将被删除。

$(window).scroll(function() {
    if ($(this).scrollTop() >= $('#section-3').offset().top) {
        $('.hamburger').addClass('navwhite')
    }
    if($(this).scrollTop() < $('#section-3').offset().top) {
        $('.hamburger').removeClass('navwhite')
    }
});

Answer 2

以下代码证明元素是否已完全进入视口并设置或删除类：

var section = $('.section');
var sectionTop = section.offset().top + section.height();

$(window).bind('scroll', function() {
    var windowTop = $(window).scrollTop() + $(window).height();

    if (windowTop > sectionTop) {
          $('.hamburger').addClass('navwhite')
    }
    else {
        $('.hamburger').removeClass('navwhite')
    }
});

Answer 3

由于您的问题根据我的理解解决了背景和前景色，您还可以查看以下库：BackgroundCheck

Answer 4

请看一下这个答案：Determine distance from the top of a div to top of window with javascript。

使用Jaspers代码，您可以计算从元素到视口顶边的距离。

然后你可以比较背景的大小和它在屏幕上的当前位置：

// distance defined like in Jaspers answer linked above
if(distance <= 0 && distance >= (0-$('#section-3').outerHeight())){
$('.hamburger').addClass('navwhite');
}else{
$('.hamburger').removeClass('navwhite');
}

我已经分叉了Jaspers JSFiddle，在body元素上添加了一个类red，只要黄色正方形触及边缘，黄色方块就会触及上面的文档边界并移除类：{ {3}}

Answer 5

这是纯粹的js。它会在滚动时触发并根据需要更改类。
假设身体是你的容器元素。

document.body.addEventListener('scroll',function(){
 if (document.body.scrollTop<document.querySelector('#section-3').style.height) {
   document.querySelector('.hamburger').setAttribute('class','navwhite');
 } else if (document.body.scrollTop>=document.querySelector('#section-3').style.height) {
  document.querySelector('.hamburger').removeAttribute('class');
 }
});

Answer 6

简单

jQuery( "classname/id of the div" ).eq(position of the div).addClass(new class name);

如何基于div位置/ scrolltop添加/删除类。

6 个答案: