Question

我有一种固定在页面侧面的进度跟踪器，当您滚动时，我希望线条在用户向下滚动页面时获得高度（以百分比表示）。当用户滚动时，我无法将高度增加一个。这是我目前的代码。

JS

$(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 + '%');
 }
})

Answer 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>

Answer 2

问题是您在scroll事件中定义number。您需要在外面定义它以便增加金额。

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

您当前的这种方式意味着每次事件触发时number都会重置为0.

Answer 3

要在向下滚动时增加数量，可以执行

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()) + '%');
})

Answer 4

这些事件会非常频繁地触发，因此您可能希望将选择器移动到闭包中，这样就不必每次都重新计算：

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

另外，不确定您打算如何重置。无论是向上还是向下滚动，滚动事件都将触发，因此数字将继续增加。这就是你想要的吗？

Answer 5

我认为进度条的高度应该相对于窗口的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>

Answer 6

@Override
public void onUserInteraction() {
    if (getCurrentFocus() != null) {
        InputMethodManager in = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
        assert in != null;
        in.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
    }
    super.onUserInteraction();
}

**BUT**

body {
    height: 4000px;
    width: 4000px;
}
          
.main {
    position: fixed;
}

如何在窗口滚动上增加一个数字1

6 个答案: