0

This effect i want to do is the same as in this website https://preview.uideck.com/items/proton/app.html#screenshots

notice that when you scroll to the feutures row, the button Feuture in the navbar have the hover effect persisted (actived).

The first think I thought is related to anchoring, but I dont know how it use the CSS proprieties to do that.

Gregory N. M.
  • 45
  • 7
  • 2
    Greg, have you tried with something. If you can show what you have tried and what is not working with you code, it will help. In regards to anchor see this simple example https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor which may give you clear idea of the href attribute value – Alan M Dec 29 '19 at 19:29
  • I do know how to use anchors like this...but I dont have a clue how it will works in CSS code to persist the hover effect like the example o showed. – Gregory N. M. Dec 30 '19 at 18:47
  • This will help: https://stackoverflow.com/questions/32395988/highlight-menu-item-when-scrolling-down-to-section – Stuart Dec 31 '19 at 10:42

1 Answers1

1

I do not think that it is possible to do it just with anchors. I found a solution with jQuery.

HTML AND CSS:

The main idea is to create an invisible/fixed line in the middle of the screen to detect when this line in inside one section or other.

<div id="controller"></div>

#controller{
  position: fixed;
  width: 100%;
  top: 50%;
}

JQUERY

After this, you have to calculate the distance of each section/feature to the html tag as we are doing here:

var dy = $('html').offset().top - $('#content-section-1').offset().top;
var distance_s1 = Math.sqrt(dy * dy);

Finally, we have to add on scroll event to check if the distance of our controller to the beginning of the document(html tag) is bigger than the distance of a section to the beginning of the document(html tag) in order to emulate the hover effect by adding a specific class.

$(window).scroll(function() {
  var dy = $('html').offset().top - $('#controller').offset().top;
  var distance_c = Math.sqrt(dy * dy); 

  if(distance_c >= distance_s3){
    $('#navbar').find('.active').removeClass('active');
        $('#Section3').addClass('active');
    }else if(distance_c >= distance_s2){
    $('#navbar').find('.active').removeClass('active');
    $('#Section2').addClass('active');
  }else if(distance_c >= distance_s1){
    $('#navbar').find('.active').removeClass('active');
    $('#Section1').addClass('active');
  }
});

Here on fiddle: https://jsfiddle.net/Samuel10F/vuon5h49/123/

If you find a more efficient way to do it please let me now :)

Samuel Diez
  • 541
  • 4
  • 5