如何在窗口滾動上增加數字1在窗口滾動上

我有一種類型的進度跟蹤器坐在我的頁面一側，當您滾動時，我希望線條獲得高度（百分比），當用戶向下滾動頁。我無法在用戶滾動時讓高度增加一個。這是我目前的代碼。如何在窗口滾動上增加數字1在窗口滾動上

$(window).scroll(function(){ 
var number = 0; /* I'd like to increment this by one on scroll */ 
// Only start the process when the first section comes into view 
if($("#progress-tracker-nav li").hasClass('active-section')) { 
    number++; /* I'd like to increment this by one on scroll */ 
    $(".progress-line").css('height', number + '%'); 
} 
})

來源

2017-02-20 Taylor Foster

你不應該使用的滾動功能1計數器，因爲你必須考慮到，當他們向上滾動以及 –

您必須聲明number變量scroll事件處理程序之外，因爲每次當scroll事件被觸發時，該變量的值是refreshed。

在您當前的代碼中，您爲每個0值分配了number變量。

var number = 0; 
 
$(window).scroll(function(){ 
 
    number++; 
 
    $("#number").text(number + '%'); 
 
})

body{ 
 
    height:1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="number"></div>

來源

2017-02-20 21:19:00

這是不行的，如果你上下滾動，這將是過於複雜和不準確該比例仍然上升 –

的問題是，你定義number滾動事件中。您需要在外部定義它以便增加金額。

var number = 0; 
$(window).scroll(function(){ 
    number++; 
});

你正在做它目前的方式是指number重置爲0每次事件觸發。

來源

2017-02-20 21:19:27

OP：我和Alexandru-lonut的答案是一樣的，但他是第一個。如果你接受一個答案，請讓它成爲他的答案。 –

upvote爲您的答案和你的慷慨:) –

Upvote有更多的內疚：P –

這些事件將觸發非常頻繁，所以你可能希望你的選擇每次進入一個封閉，使他們不必重新計算：

function registerScrollEvent() { 
// get reference to DOM elements once since the scroll event fires frequently 
var number = 0, 
    elNav = $("#progress-tracker-nav li"), 
    elProgress = $(".progress-line"); 
$(window).scroll(function(){ 
    // Only start the process when the first section comes into view 
    if(elNav.hasClass('active-section')) { 
    number++; 
    elProgress.css('height', number + '%'); 
    } 
}) 
}

此外，要注意的問題，對相關IOS滾動事件滾動完成後，僅射擊：

https://github.com/twbs/bootstrap/issues/16202

而且，不知道你是如何在重新規劃。無論滾動向上還是向下，滾動事件都會觸發，因此數字會持續增加。那是你要的嗎？

來源

2017-02-20 21:28:17 rasmeister

答案不會以問號結束;） –

哈哈？顯然有些呢？ – rasmeister

我認爲進度條的高度應該相對於窗口的scrollTop除以最大滾動可能值（文檔的高度減去窗口的高度）。使用這個公式：

percentage_of_height_of_progress_bar = 100 * scroll_top_of_window/(height_of_document - height_of_window);

例子：

$(window).scroll(function() { 
 
    var percent = $(document).scrollTop()/($(document).height() - $(window).height()) * 100; 
 
    $(".progress").css('width', percent + '%'); 
 
})

body { 
 
    height: 1000px; 
 
} 
 

 
.progress { 
 
    position: fixed; 
 
    width: 0%; 
 
    height: 10px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><div class="progress"></div></div>

來源

2017-02-20 21:35:11

這應該被標記爲正確的答案，因爲這可以被假定爲用戶想要的最準確的描述。 –

@downvoter爲什麼？ –

有人可能會嫉妒他們錯了 –

要增加滾動數下來，你可以做

var lastScrollPosition = $(document).scrollTop(); 
var number = 0; 
$(window).on('scroll', function(e) { 
    if($(document).scrollTop() > lastScrollPosition){ 
     number++; 
    } 
})

同樣，你可以更換如果您需要減少用戶向上滾動時的數量，則需要>至<。

如果你想減少向上滾動的高度並增加向下滾動的高度，你也可以這樣做。

var lastScrollPosition = $(document).scrollTop(); 
var initalHeight = 100; 
$(window).on('scroll', function(e) { 
    $(".progress-line").css('height', ((100/ (100 - $(document).scrollTop()/$(document).height()) + '%'); 
})

來源

2017-02-20 21:36:16

如何在窗口滾動上增加數字1在窗口滾動上

回答

相關問題