CODEWITHSUNDEEP
javascripthtmlcsscss-animations
LondonMassive
LondonMassive

Reputation: 457

Change CSS of one element when another element is in view

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.

Upvotes: 0

Views: 1367

Answers (4)

Tristan Warren
Tristan Warren

Reputation: 435

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

Upvotes: 0

Priya jain
Priya jain

Reputation: 1147

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>

Upvotes: 0

Priya jain
Priya jain

Reputation: 1147

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");
        }
    });
}

Upvotes: 0

fatalcoder524
fatalcoder524

Reputation: 1480

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();

Upvotes: 1

Related Questions