2

我有一个像这样划分的单页网站：

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

我怎样才能知道观众目前在哪里？返回查看器所在的 div 名称的函数。

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

4

3 回答 3

3

您可以在窗口滚动上放置一个事件侦听器。每次窗口滚动时，我们可以检查 body 的顶部是否在每个部分的顶部下方（或在每个部分顶部的 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();

演示

于 2013-09-02T00:53:52.433 回答
1

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

positions = {}

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

存储顶部和底部位置允许在div从下方输入 a 时得到通知。

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

{
  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] + '!');
})
于 2013-09-02T01:18:24.497 回答
1

试试这个http://jsfiddle.net/63z9S/3/基于@3dgoo 演示

//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;
于 2013-09-02T04:22:07.170 回答