Question

我正在尝试使用jQuery跟踪人们如何在我的网站上滚动。目前，每当一个人滚动浏览页面内容的25％，50％，75％和100％时，我的代码会将消息记录到控制台。

正如您所看到的，我正在为每个阶段创建四个单独的函数，并使用off（） - 函数阻止事件再次触发。但是，对我而言，这种做法似乎过分了。有没有更好的方法可以做到这一点，而无需创建尽可能多的函数？

下面的代码工作正常（据我所见）。我只是想知道我有什么更好的解决方案吗？

PS。我是一个完全的初学者，所以请在回复时考虑到这一点:)

$(function(){


var totalHeight = $('footer').offset().top - $(window).height();
var twentyFive = Math.round(totalHeight/4);
var fifty = Math.round(totalHeight/2);
var seventyFive = Math.round(totalHeight*0.75);


function twentyFiveFunction(){
	if( $(window).scrollTop() > twentyFive ){
		console.log("25 % scrolled!");
		$(window).off('scroll', twentyFiveFunction);
		$(window).on('scroll', fiftyFunction);

		}
	}

function fiftyFunction(){
	if( $(window).scrollTop() > fifty ){
		console.log("50 % scrolled!");
		$(window).off('scroll', fiftyFunction);
		$(window).on('scroll', seventyFiveFunction);
		}
	}


function seventyFiveFunction(){
	if( $(window).scrollTop() > seventyFive ){
		console.log("75 % scrolled!");
		$(window).off('scroll', seventyFiveFunction);
		$(window).on('scroll', scrollCompleteFunction);
		}
	}

function scrollCompleteFunction(){
	if( $(window).scrollTop() > totalHeight ){
		console.log("100 % scrolled!");
		$(window).off('scroll', scrollCompleteFunction);
		}
}


$(window).on('scroll', twentyFiveFunction);


});

Answer 1

使用jQuery one函数可以简化它。

http://api.jquery.com/one/

每次都不必使用off。

Answer 2

这样的事情应该有效。

var max_scroll = 0;
var done = [false, false, false, false]
var height = $(document).height() - $(window).height();

$(window).on('scroll', function() {
    var perc = $(window).scrollTop() / height;
    if (perc <= max_scroll) return false;

    max_scroll = perc;
    var index = Math.floor(perc / 25) - 1;

    if (index >= 0 && !done[index]) {
        done[index] = true;
        console.log(((index + 1) * 25) + '% scrolled');
    }
});

Answer 3

感谢您之前的回复。无论如何，我最终想出了一个很好的解决方案。所以，如果有人感兴趣，请按照我的想法提出：

＆＃13;

var fired = [false, false, false, false];

	$(window).on('scroll', function(){
	var docHeight = Math.floor($(document).height());
	var scrollTop = $(window).scrollTop() + $(window).height() + 500;
	for(i = 1; i < (fired.length + 1); i++){

	if( ( (docHeight * 0.25 * i) < scrollTop ) && fired[i-1] == false ){
		console.log(i/4*100 + "%!");
		fired[i-1] = true; }
		}
  });

＆＃13;

jQuery：在滚动时只使事件发生一次

3 个答案: