Question

我试图通过在带有浅色和深色背景的div上滚动时添加类来更改徽标颜色。到目前为止，它在第一个元素上效果很好，但在其他元素上效果不佳。

这是我从Stack本身获得的代码。...

$(function() {

var logo = $('.mainImgLogo');
var hieghtThreshold = $(".light").offset().top;
var hieghtThreshold_end  = $(".light").offset().top + $(".light").height() ;

$(window).scroll(function() {
    var scroll = $(window).scrollTop();


            if (scroll >= hieghtThreshold && scroll <=  hieghtThreshold_end ) {
                logo.addClass('whiteLogo');

            } else {
                logo.removeClass('whiteLogo');
            }

    });

}）;

        <h2 class="mainImgLogo">Page 1</h2>


<div class="pgs page1">
    Page 1
</div><!--page 1-->

<div class="pgs page2 light">
    Page 2  
</div><!--page 1-->


<div class="pgs page3">
    Page 3
</div><!--page 1-->


<div class="pgs page4 light">
    Page 4
</div><!--page 1-->


<div class="pgs page5">
    Page 5
</div><!--page 1-->




.pgs 
{
    position:relative;
    display:block;
    height:100vh;
    border-bottom:3px solid #333;
    background:#f3f3f3;
    vertical-align:middle;
    text-align:center;


}
.mainImgLogo
{
    position:fixed;
    top:1%;
    left:0%;
    font-size:5rem;
    display:block;
    text-align:center;
    color:#333;
    z-index:99999 !important;
}
.light
{
    background:#333;
    color:#f3f3f3;
    text-align:center;
}
.whiteLogo
{
    color:#f3f3f3;
}

在第一个实例上将

whiteLogo 类添加/删除到 mainImgLogo ，但在下一个实例上不添加。请引导我完成...

谢谢

Answer 1

解决方案

    <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  background-color: black;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
.pgs 
{
    position:relative;
    display:block;
    height:100vh;
    border-bottom:3px solid #333;
    background:#f3f3f3;
    vertical-align:middle;
    text-align:center;


}
.mainImgLogo
{
    position:fixed;
    top:1%;
    left:0%;
    font-size:5rem;
    display:block;
    text-align:center;
    color:#333;
    z-index:99999 !important;
}
.light
{
    background:#333;
    color:#f3f3f3;
    text-align:center;
}
.whiteLogo
{
    color:#f3f3f3;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h2 class="mainImgLogo " data-scroll-group="header-group">Page 1</h2>


<div class="pgs page1" data-header-group="mainImgLogo">
    Page 1
</div><!--page 1-->

<div class="pgs page2 light" data-header-group="whiteLogo mainImgLogo">
    Page 2  
</div><!--page 1-->


<div class="pgs page3" data-header-group="mainImgLogo">
    Page 3
</div><!--page 1-->


<div class="pgs page4 light" data-header-group="whiteLogo mainImgLogo">
    Page 4
</div><!--page 1-->


<div class="pgs page5" data-header-group="mainImgLogo">
    Page 5
</div><!--page 1-->





<script>

$( document ).ready(function() {
    // This is a handy wrapper function that will return an array of matching element instead of a nodeList
function querySelectorArray(query, root){
  return Array.prototype.slice.call((root || document).querySelectorAll(query));
}

// Get all headers that are designated 'scroll-group'
var headers = querySelectorArray('[data-scroll-group]');

// Loop through the headers
headers.forEach(function(header){
  // Get the name of the group from the headers [data-scroll-group] attribute
  var group = header.getAttribute('data-scroll-group');
  // Get all the sections with a matching data-[data-scroll-group] attribute
  var sections = querySelectorArray('[data-' + group + ']');
  // Create an Event Listener for scrolling
  window.addEventListener('scroll', function(){
    // Declare a lastSection variable that can store the last class that scrolled by
    var lastSection = false;
    sections.forEach(function(section){
      // Get the elements position compared to the viewport
      var offset = section.getBoundingClientRect();
      // If the position is smaller than 0 it has scrolled further than that section
      // The same is true for the scroll being smaller than the negative height - if so, it is out of view.
      if(offset.top < 0 && offset.top > -offset.height) lastSection = section.getAttribute('data-' + group + '');
    });
    // Apply the class to your header
    header.className = lastSection || 'mainImgLogo'; 
  })
});
});
</script>
</body>
</html>

jQuery偏移量-滚动添加类到Div

1 个答案: