2

次のように分割された単一ページのWebサイトがあります。

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

視聴者が現在どこにいるのかを知るにはどうすればよいですか? ビューアが含まれる div の名前を返す関数。

jquery waypointsを使用してみましたが、そのアプローチは間違った角度です。ウェイポイントは、ビューポートが div に入ると関数をトリガーします。それに応じてメニュースライダーを調整できるように、ビューポートがプログラムで入力しているdivを見つけたいです。

4

3 に答える 3

3

ウィンドウスクロールにイベントリスナーを配置できます。ウィンドウがスクロールするたびに、本文の上部が各セクションの上部の下 (または各セクションの上部から 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

@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;
于 2013-09-02T04:22:07.170 に答える
1

読み込みページで、各 div の上部位置、下部位置、およびクラス名の両方を保存します。

positions = {}

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

上と下の両方の位置を保存することで、下からaが入力されたときに通知することができdivます。

位置オブジェクトは 1 回だけ計算され、次のようになります。

{
  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 に答える