当特定的div可见时更改颜色 [英] Changing color when specific div is visible

问题描述

请告诉我如何以最正确的方式做到这一点。

Please tell me how can I make this in the most right way.

HTML：

<div id="fixed-red" class="fixed-red"></div>
<div id="fixed-green" class="fixed-green"></div>
<div id="fixed-blue" class="fixed-blue"></div>
<div id="red" class="red"></div>
<div id="green" class="green"></div>
<div id="blue" class="blue"></div>

CSS：

html,body{
  height:100%;
}
.fixed-red,.fixed-green,.fixed-blue{
  width:30px;
  height:30px;
  position:fixed;
  top:10px;
  left:10px;
  background:#333;
}
.fixed-green{
  top:50px;
}
.fixed-blue{
  top:90px;
}
.red-active{
  background:#f00;
}
.green-active{
  background:#0f0;
}
.blue-active{
  background:#00f;
}
.red,.green,.blue{
  width:100%;
  height:100%;
}
.red{
  background:#900;
}
.green{
  background:#090;
}
.blue{
  background:#009;
}

我要添加/删除红色/绿色/当用户打开/关闭 red <时，将blue-active 类别更改为 fixed-red / green / blue div / code>，绿色或蓝色 div（当它们可见时），因此小div将

I want to add/remove red/green/blue-active class to the fixed-red/green/blue divs when the user is on/off the red, green, or blue divs(when they are visible), so the small divs would be respectively highlighted with the color of the big, display divs when the user is on them.

谢谢！

推荐答案

我必须稍微调整一下代码，以便使代码更干
现在将这些类替换为 color 类。

I had to tweak the code a little so the code could be more D.R.Y. The classes are now replaced by color class.

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('resize scroll', function() {
  $('.color').each(function() {
      var activeColor = $(this).attr('id');
    if ($(this).isInViewport()) {
      $('#fixed-' + activeColor).addClass(activeColor + '-active');
    } else {
      $('#fixed-' + activeColor).removeClass(activeColor + '-active');
    }
  });
});

html,
body {
  height: 100%;
}

.fixed-red,
.fixed-green,
.fixed-blue {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 10px;
  left: 10px;
  background: #333;
}

.fixed-green {
  top: 50px;
}

.fixed-blue {
  top: 90px;
}

.red-active {
  background: #f00;
}

.green-active {
  background: #0f0;
}

.blue-active {
  background: #00f;
}

.color {
  width: 100%;
  height: 100%;
}

#red {
  background: #900;
}

#green {
  background: #090;
}

#blue {
  background: #009;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fixed-red" class="fixed-red red-active"></div>
<div id="fixed-green" class="fixed-green"></div>
<div id="fixed-blue" class="fixed-blue"></div>
<div id="red" class="color"></div>
<div id="green" class="color"></div>
<div id="blue" class="color"></div>

这里是一个有效的工具

https://jsfiddle.net/BoyWithSilverWings/ds9x55z7/

这篇关于当特定的div可见时更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！