How To Highlight Bottom Li When User Scroll Div?

Could you please tell me how how to highlight bottom li when user scrolling in a div? I have one container div, in which there are four divs. In the footer I also have four li (f

Solution 1:

https://jsbin.com/borohoheji/edit?html,css,js,console,output

Look at what i did i check if the element is visible with .is(':visible')

You can work from there and do exactly what you want

Solution 2:

Change your code to:

    (function(){
  'use strict';
  $(function(){
    $( "#container" ).scroll(function() {
      console.log('scrlling');
      if (elementInViewport($('#first'))) {
    // The element is visible, do somethingconsole.log('first visible')
    } else {
         console.log('second visible')
    }
    });
    $( "#container >div" ).hover(
      function() {
        $(this).css('color', 'yellow');
      });
  })

Solution 3:

First, do the following :

• give all the text divs a classname eg 'para', to make them more readily selectable as a collection.
• establish a ul.fC li.active {...} directive in your style sheet to give the desired visual effect.

Then :

(function() {
    'use strict';
    $(function() {
        var$container = $("#container"),
            $paras = $container.children(".para"), // the four text divs.$listElements = $(".footer ul.fC li"), // the four li elements in the footer.
            oldIndex = -1;
        $container.scroll(function() {
            var index = $paras.index($paras.filter(visibleY).eq(0)); // position of the first visible text div.if(index !== oldIndex) { // avoid unnecessary work$listElements.eq(oldIndex).removeClass('active'); // remove highlight$listElements.eq(index).addClass('active'); // add highlight
                oldIndex = index; // remember index for next event turn
            }
        }).trigger('scroll');
        functionvisibleY() {
            // based on http://stackoverflow.com/a/21627295/3478010var el = this; // because function is called as a .filter() callback.var rect = el.getBoundingClientRect(), 
                top = rect.top, 
                height = rect.height, 
                el = el.parentNode;
            do {
                rect = el.getBoundingClientRect();
                if (top <= rect.bottom === false) returnfalse;
                // Check if the element is out of view due to a container scrollingif ((top + height) <= rect.top) returnfalse
                el = el.parentNode;
            } while (el != document.body);
            // Check its within the document viewportreturn top <= document.documentElement.clientHeight;
        };
    });
})();

As written above, the change of style will happen in response to paras exiting/entering the container's top edge.

The behaviour can be changed to respond to paras exiting/entering the container's bottom edge by replacing :

var index = $paras.index($paras.filter(visibleY).eq(0)); // position of the first visible para.

with :

var index = $paras.index($paras.filter(visibleY).last()); // position of the last visible para.

Choose whichever is more desirable.