如何檢查當前窗口的位置對價值

數組比方說，我們已經有了這個HTML：如何檢查當前窗口的位置對價值

<div class="locationhash" data-position="0"></div> 
<div class="locationhash" data-position="1000"></div> 
<div class="locationhash" data-position="3000"></div> 
<div class="locationhash" data-position="5000"></div> 
<div class="locationhash" data-position="8000"></div>

其中data-positions值，在正常條件下將等於元素的高度從頁面頂部的px。

林檢索元件與.locationhash，讀取其數據位置，並且使用該碼推動兩個值作爲對象到一個數組。（這裏按預期工作，第三個代碼示例中的輸出）

var getSections = function() { 
var pageSectionsArr = []; 
var pageSections = (document).querySelectorAll('.locationhash'); 

Array.prototype.forEach.call(pageSections, function(section) { 
    var getSectionPos = section.getAttribute('data-position'); 
    var pageSectionObj = { 
    pageSection : section, 
    pageSectionPos : getSectionPos 
    }; 
    pageSectionsArr.push(pageSectionObj); 
}); 
console.log(pageSectionsArr) 
}; 

(function recalcSectionPos() { 
    $(window).resize(function() { 
     getSections(); 
    }); 
})();

輸出看起來像這樣：

[ {div.locationhash, value of its data-position}, 
{div.locationhash, value of its data-position}, ... ]

現在我需要檢查滾動閹當前window.scrollTop（）等於任何的數據位置值，因此：

$(window).scroll(function() { 
    var hFromTop = $(window).scrollTop() 
    //cant figure out what should i do next (jquery allowed) 
});

問：我怎麼能檢查當前window.scrolltop（）對多個值，而用戶在滾動，所以我可以做的時候window.scroll頂部等於值

（我使用這個數組，因爲以後我也會爲了將其追加閱讀.locationhash的ID事情發生URL使用位置替換）

來源

2013-08-29 mymlyn

這將幫助你http://jsfiddle.net/cse_tushar/Dxtyu/141/ –

太感謝你了！你能添加此作爲一個答案，所以你可以得到當之無愧的+點？ – mymlyn

DEMO

$(document).ready(function() { 
    $(document).on("scroll", onScroll); 

    //smoothscroll 
    $('a[href^="#"]').on('click', function (e) { 
     e.preventDefault(); 
     $(document).off("scroll"); 

     $('a').each(function() { 
      $(this).removeClass('active'); 
     }) 
     $(this).addClass('active'); 

     var target = this.hash, 
      menu = target; 
     $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top+2 
     }, 500, 'swing', function() { 
      window.location.hash = target; 
      $(document).on("scroll", onScroll); 
     }); 
    }); 
}); 

function onScroll(event){ 
    var scrollPos = $(document).scrollTop(); 
    $('#menu-center a').each(function() { 
     var currLink = $(this); 
     var refElement = $(currLink.attr("href")); 
     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
      $('#menu-center ul li a').removeClass("active"); 
      currLink.addClass("active"); 
     } 
     else{ 
      currLink.removeClass("active"); 
     } 
    }); 
}

來源

2013-08-30 01:37:31

我跟着@tushar Gupta的建議，還包裹在一個函數檢查閹滾動結束

$(window).scroll(function() { 
clearTimeout($.data(this, 'scrollTimer')); 
$.data(this, 'scrollTimer', setTimeout(function() { 
    var hFromTop = $(window).scrollTop(); 
    $.each(pageSectionsArr, function(obj) { 
     console.log(this + 'is sparta') 
     if (~~this.pageSectionPos <= hFromTop && ~~this.pageSectionPos + this.pageSection.offsetHeight > hFromTop) { 
     //console.log(this.pageSectionPos) 
     var sectionsId = this.pageSection.id 
     //console.log(sectionsId) 
     window.location.replace('#/'+sectionsId) 
     }; 
    }); 
}, 250)); 
});

來源

2013-08-29 18:08:49 mymlyn

如何檢查當前窗口的位置對價值

回答

相關問題