Question

我有一个单页网站分为：

<div class="splash-screen"> 
  <!--Content-->
</div>
<div class="about-us"> 
  <!--Content-->
</div>
<div class="contact-us"> 
  <!--Content-->
</div>

如何找出观众目前的位置？一个函数，它返回查看器所在的div的名称。

我尝试过使用jquery waypoints，但它的方法是错误的。当视口进入div时，Waypoints触发一个函数。我想找到视口以编程方式输入的div，以便我可以相应地调整菜单滑块。

Answer 1

您可以在窗口滚动上放置一个事件侦听器。每次窗口滚动时，我们都可以检查身体顶部是否位于每个部分的顶部（或每个部分顶部的100个像素内）。

<强> HTML

<ul id="navigation">
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
</ul>

<div id="section1" class="pageSection">
    <h2>Section 1</h2>
</div>
<div id="section2" class="pageSection">
    <h2>Section 2</h2>
</div>
<div id="section3" class="pageSection">
    <h2>Section 3</h2>
</div>
<div id="section4" class="pageSection">
    <h2>Section 4</h2>
</div>

<强>的Javascript

$(window).scroll(function() {

    var windowTop = Math.max($('body').scrollTop(), $('html').scrollTop());

    $('.pageSection').each(function (index) {
        if (windowTop > ($(this).position().top - 100))
        {
            $('#navigation a.current').removeClass('current');
            $('#navigation a:eq(' + index + ')').addClass('current');
        }
    });

}).scroll();

<强> Demo

Answer 2

在加载页面上，存储每个div的顶部位置，底部位置和类名称：

positions = {}

for $div in $('div')
  topPosition = $div.offset().top
  bottomPosition = topPosition + $div.outerHeight()
  positions[topPosition] = positions[bottomPosition] = $div.attr('class')

将最高和存储在最低位置，可以在从下方输入div时收到通知。

位置对象只计算一次，看起来像是：

{
  0: 'splash-screen',
  400: 'splash-screen',
  401: 'about-us',
  801: 'about-us',
  802: 'contact-us',
  1202: 'contact-us'
}

然后听一下窗口滚动事件，然后调用：

$(window).scroll -> 
  return unless divClassName = positions[window.scrollY]
  console.log "Entering #{divClassName}!"

使用JavaScript编辑：

var positions = {};

$('div').each(function(index) {
  var topPosition, bottomPosition;
  topPosition = $(this).offset().top;
  bottomPosition = topPosition + $(this).outerHeight();
  positions[topPosition] = positions[bottomPosition] = $(this).attr('class');
})

$(window).scroll(function(e){      
  if (positions[window.scrollY] == undefined) return;
  console.log('Entering ' + positions[window.scrollY] + '!');
})

Answer 3

根据@ 3dgoo演示

试试这个http://jsfiddle.net/63z9S/3/

//get all sections
var sections = $('.' + sectionClass);
//save each section top position and height along with id
for(var i = 0; i < sections.length; i++){
    var section = $(sections[i]);
    _items.push({
        id: section.attr('id'),
        top: section.offset().top,
        height: section.outerHeight()
    });
}


var wndTopPos = $(window).scrollTop(); //current window top position
var wndHeight = $(window).height();    //window height, could be stored somewhere
var wndBotPos = wndTopPos + wndHeight; //bottom window position
var sections  = new Array();

for(var i = 0; i < _items.length; i++){
    //if top or bottom section position(border) lies between window top or bottom position(border)
    //-> its active section and
    //if window is inside one of the sections
    if(_items[i].top >= wndTopPos && 
            _items[i].top <= wndBotPos || 
        _items[i].top + _items[i].height >= wndTopPos &&
            _items[i].top + _items[i].height <= wndBotPos ||        
        _items[i].top <= wndTopPos && 
            _items[i].top + _items[i].height >= wndTopPos || 
        _items[i].top <= wndBotPos && 
            _items[i].top + _items[i].height >= wndBotPos){
                sections.push(_items[i].id)
    }
}

return sections;

使用jquery，找到视口顶部为“内部”的div类

3 个答案: