Question

请问用户在div中滚动时如何突出显示底部li？我有一个容器div，其中有四个divs。在页脚中我还有四个li（第一，第二，第三，第四）。当用户滚动相应的div时，我想选择li（背景变为红色）。

实施例

代码运行时，应选择第一个li，后台变为红色，因为第一个div位于视口中。如果用户滚动并移动到第二个div，则应选择第二个li。等等。

我试过了那个

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

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

})()

我不想使用插件

Answer 1

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

看看我做了什么，我用.is(':visible')

检查元素是否可见

你可以在那里工作并完全按照自己的意愿行事

Answer 2

将您的代码更改为：

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

Answer 3

首先，执行以下操作：

为所有文本div提供一个类名，例如'para'，以使它们更容易被选为集合。
在样式表中建立ul.fC li.active {...}指令，以提供所需的视觉效果。

然后：

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

如上所述，风格的变化将响应于退出/进入集装箱的顶部边缘而发生。

可以更改行为以通过替换来响应退出/进入容器底部边缘的行：

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.

选择更合适的选择。

用户滚动div时如何突出显示底部li？

3 个答案: