用户滚动div时如何高亮显示底角? [英] how to highlight bottom li when user scroll div?

问题描述

能否请您告诉我用户在div中滚动时如何突出显示底部li?我有一个容器div，其中有四个divs.在页脚中，我还有四个li(第一，第二，第三，第四).我想在用户滚动各个div时选择li(背景变为红色).

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 (first, second, third,fourth). I want to select the li (background become red)when the user scrolls the respectively div's.

示例

代码运行时，应选择第一个li，因为第一个div在视口中，因此背景变为红色.如果用户滚动并移动到第二个div，则应选择第二个li.依此类推.

When the code runs, the first li should be selected it background become red because the first div is in the view port. If the user scrolls and moves to the second div, the second li should be selected. And so on.

我那样尝试

https://jsbin.com/giwizufotu/edit?html,css ，js，输出

(function(){
  'use strict';
  $(function(){
    $( "#container" ).scroll(function() {
      console.log('scrlling');
      if (elementInViewport2($('#first'))) {
        // The element is visible, do something
        console.log('first visible')
    } else {
         console.log('second visible')
    }
    });
  })

  function elementInViewport2(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}

})()

我不想使用插件

推荐答案

首先，请执行以下操作:

First, do the following :

• 为所有文本div赋予一个类名，例如'para'，以使其更易于选择作为集合.
• 在样式表中建立一个ul.fC li.active {...}指令，以提供所需的视觉效果.

• 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.

然后:

(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');
        function visibleY() {
            // based on http://stackoverflow.com/a/21627295/3478010
            var 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) return false;
                // Check if the element is out of view due to a container scrolling
                if ((top + height) <= rect.top) return false
                el = el.parentNode;
            } while (el != document.body);
            // Check its within the document viewport
            return 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.

与:

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

选择更理想的一个.

这篇关于用户滚动div时如何高亮显示底角?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！