Question

使用HTML / CSS＆amp; amp;实现了一个进度条。 JQuery的。因此，当我向下滚动页面时，顶部会出现一个蓝色条。这不会出现。

show.html

<div class="progress">
  <div class="bar"></div>
</div>

的style.css

.progress {
  position: fixed;
  top:  0;
  left: 0;
  width: 100%;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #7fdbff;
}

scroll.js

$(document).on('scroll', function() {
  var pixelsFromTop = $(document).scrollTop()

  if (pixelsFromTop < 600) {
    $('section').css('background-color', '#fff0f0')
  } else if (pixelsFromTop < 1200) {
    $('section').css('background-color', '#F8D800')
  } else if (pixelsFromTop < 1600) {
    $('section').css('background-color', '#F6FFFF') 
  } else {
    $('section').css('background-color', '#cdccc7')
  }

  var documentHeight = $(document).height()
  var windowHeight = $(window).height()
  var difference = documentHeight - windowHeight
  var percentage = 100 * pixelsFromTop / difference

  $('.bar').css('width', percentage + '%')

})

但是当我在进度div中添加文本时，栏会出现

例如

节目

我得到以下

但希望它在没有文字的情况下工作

检查元素宽度增加

html代码

<section class="day">
    <h1><%= "To make #{number_to_currency @product.revenue}" %></h1>
     <p><%= "You need to make #{number_to_currency @product.monthly_amount} a month" %><br/>
        <%= "You need to make #{number_to_currency @product.daily_amount} a day" %>
    </p>
    <br/>
    <i class="fa fa-chevron-down" aria-hidden="true"></i>
</section>


<section class="people"> 

    <h1>If you create & sell a product</h1>
        <p><%= "To make #{@product.revenue } 10,000 people to buy a
        #{number_to_currency @product.create_and_sell_product_10000} product" %><br/>

        <%= "To make #{@product.revenue } 5,000 people to buy a
        #{number_to_currency @product.create_and_sell_product_5000} product" %><br/>

        <%= "To make #{@product.revenue } 2,000 people to buy a
        #{number_to_currency @product.create_and_sell_product_2000} product" %><br/>

        <%= "To make #{@product.revenue } 1,000 people to buy a
     #{number_to_currency @product.create_and_sell_product_1000} product" %><br/>

        <%= "To make #{@product.revenue } 100 people to buy a
     #{number_to_currency @product.create_and_sell_product_100} product" %>
    </p>
</section>

Answer 1

这对我来说很好。我刚刚将您的代码复制到一个代码段中，并将样式body{min-height: 1000;}添加到您的CSS中。它的工作正常。

＆＃13;

$(document).on('scroll', function() {
      var pixelsFromTop = $(document).scrollTop()

      if (pixelsFromTop < 600) {
        $('section').css('background-color', '#fff0f0')
      } else if (pixelsFromTop < 1200) {
        $('section').css('background-color', '#F8D800')
      } else if (pixelsFromTop < 1600) {
        $('section').css('background-color', '#F6FFFF')
      } else {
        $('section').css('background-color', '#cdccc7')
      }

      var documentHeight = $(document).height()
      var windowHeight = $(window).height()
      var difference = documentHeight - windowHeight
      var percentage = 100 * pixelsFromTop / difference

      $('.bar').css('width', percentage + '%')

    })

＆＃13;

body{min-height: 1000px;}
      .progress {
        position: fixed;
        top:  0;
        left: 0;
        width: 100%;
      }

      .bar {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 3px;
        background-color: #7fdbff;
      }

＆＃13;

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

＆＃13;

Answer 2

HTML已经有一个进度条标记：

<progress value="22" max="100"></progress>

此标记有2个属性，您应该从代码中更改“value”属性。它更容易从JQuery或javascript HTML DOM中使用和控制。

Answer 3

您需要在html中包含一些内容，以便脚本可以实际运行。因为没有任何内容可以滚动。

密切关注您添加的js。

  var windowHeight = $(window).height()
  var difference = documentHeight - windowHeight
  var percentage = 100 * pixelsFromTop / difference

  $('.bar').css('width', percentage + '%')

在这里，您可以递增/递减进度条的百分比。此处使用整个文档的高度和从文档顶部滚动的数量来计算进度百分比。

进度条在localhost中不显示没有文本

3 个答案: