当另一个元素在视图中时，更改一个元素的 CSS

Question

I am creating a web page with an Index along one side, with anchor links to each relevant section on the page.

Upon loading the page, the first point on the index list is highlighted (different colour), when the user scrolls down manually to another section, I want the corresponding point on the index list to then become highlighted.

So I have a CSS property, to highlight the index point, and this is initially set to the first point on the list.

How can I take this CSS property from one element, and give it to another?

.current {
    opacity: 1;
    -webkit-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
  }

This is the CSS applied to the element that should be highlighted. Currently, the first element in the index is always highlighted, but of course, I need it to change as the user scrolls down the page.

Let me know if you need more info.

Answer 1

It is possible with Intersection Observer API .

Example Code using jQuery:

$(window).scroll(function() {
  var scrollDistance = $(window).scrollTop();
  var threshold=250; //in px
  $('section').each(function(i) //list of sections tag to loop
  {
      if ($(this).position().top-threshold <= scrollDistance && i<4) {
          $('.nav-menu li.menu-active').removeClass('menu-active');
          $('.nav-menu li').eq(i).addClass('menu-active');
      }
  });
}).scroll();

Answer 2

You can use the onScroll event to so that a function is triggered when a user scrolls. This can then use scrollTop to get the position.

document.getElementById("idOfScrollingSection").onscroll(() => {
    let scrollValue = document.getElementById("elementId").scrollTop;
    
    //Remove class from highlighted item
    let oldElement = document.getElementsByClassName("current");
    oldElement.classList.remove("current");

    //Add highlight class, change values depending on page position
    if (scrollValue < 200) {
         let elementToBeHighlighted = document.getElementById("idOfElementToBeHighlighted");
         elementToBeHighlighted.classList.add("current");
    } else if ....

    } else {
         let elementToBeHighlighted = document.getElementById("idOfElementToBeHighlighted");
         elementToBeHighlighted.classList.add("current");
    }
    
})

This is done is pure JS and would be a lot better using jQuery

Answer 3

Please see this fiddle. https://jsfiddle.net/cse_tushar/Dxtyu/141/

HTML:-

    <div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#home">Home</a>

            </li>
            <li><a href="#portfolio">Portfolio</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#contact">Contact</a>

            </li>
        </ul>
    </div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>

CSS:-

    body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(images/home-bg2.png);
}
#portfolio {
    background-image: url(images/portfolio-bg.png);
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#contact {
    background-color: red;
    height: 100%;
    width: 100%;
}

Jquery:-

 $(document).ready(function () {
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

Answer 4

Please add just active class to the current button (highlight it)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #666;
  color: white;
}
</style>
</head>
<body>

<h1>Active Button</h1>
<p>Highlight the active/current (pressed) button.</p>
  
<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
</script>

</body>
</html>