如何在用戶滾動div時突出顯示底部li？

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. 

與：

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

可以任意選擇是更理想的。