Question

我想构建一个进度条，指示滚动条的垂直位置。我用过这篇文章：https://css-tricks.com/reading-position-indicator/ 我制作了一个片段，以便向您展示我的代码。结果没问题，但我想在进度条下方创建一个空格。实际上，进度条隐藏了内容。我试图通过观察我评论的代码来解决这个问题，但我无法解决我的问题。有人可以帮我在进度条下创建一个空格吗？

$(document).on('ready', function() {
    var winHeight = $(window).height(),
        docHeight = $("#content").height(),
        progressBar = $('progress'),
        max, value;

    /* Set the max scrollable area */
    max = docHeight - winHeight;
    progressBar.attr('max', max);

    $(document).on('scroll', function() {
        value = $(window).scrollTop();
        progressBar.attr('value', value);
    });
});
$(window).on('resize', function() {
    winHeight = $(window).height(),
        docHeight = $("#content").height();

    max = docHeight - winHeight;
    progressBar.attr('max', max);

    value = $(window).scrollTop();
    progressBar.attr('value', value);
});

body {
  padding-top: 20px;
  height: 100vh;
  position: relative;
}
progress {
  /* Positioning */
  position: fixed;
  left: 0;
  top: 0;

  /* Dimensions */
  width: 100%;
  height: 10px;

  /* Reset the appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* Progress bar container for Firefox/IE10+ */
  background-color: transparent;

  /* Progress bar value for IE10+ */
  color: red;
}
progress::-webkit-progress-bar {
  background-color: transparent;
}

progress::-webkit-progress-value {
  background-color: red;
}

progress::-moz-progress-bar {
  background-color: red;
}
body {
  /*overflow-y: hidden;*/
}

#content {
/*  padding-top: 20px;
  height: 100vh;
  overflow-y: auto;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
    <progress value="0"></progress>
    <div id="content">
    Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt. Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt.Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt.Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt.Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt. 
  </div>
</body>

Answer 1

不太清楚你想要做什么，但元素上的固定位置将始终保持在内容之上并处于该位置。

我将进度条移动到一个容器中，然后将该固定位置赋予白色背景，并将高度加倍。

$(document).on('ready', function() {
  var winHeight = $(window).height(),
    docHeight = $("#content").height(),
    progressBar = $('progress'),
    max, value;

  /* Set the max scrollable area */
  max = docHeight - winHeight;
  progressBar.attr('max', max);

  $(document).on('scroll', function() {
    value = $(window).scrollTop();
    progressBar.attr('value', value);
  });
});
$(window).on('resize', function() {
  winHeight = $(window).height(),
    docHeight = $("#content").height();

  max = docHeight - winHeight;
  progressBar.attr('max', max);

  value = $(window).scrollTop();
  progressBar.attr('value', value);
});

body {
  padding-top: 20px;
  height: 100vh;
  position: relative;
}
.progress-container {
  width: 100%;
  height: 20px;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
}
progress {
  /* Positioning */
  /* Dimensions */
  width: 100%;
  height: 10px;
  /* Reset the appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Get rid of the default border in Firefox/Opera. */
  border: none;
  /* Progress bar container for Firefox/IE10+ */
  background-color: transparent;
  /* Progress bar value for IE10+ */
  color: red;
}
progress::-webkit-progress-bar {
  background-color: transparent;
}
progress::-webkit-progress-value {
  background-color: red;
}
progress::-moz-progress-bar {
  background-color: red;
}
body {
  /*overflow-y: hidden;*/
}
#content {
  /*  padding-top: 20px;
  height: 100vh;
  overflow-y: auto;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="progress-container">
    <progress value="0"></progress>
  </div>

  <div id="content">
    Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt,
    eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt. Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est
    dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt.Morbi fermentum
    quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend
    mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt.Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum,
    luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt.Morbi fermentum quam a
    dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris
    ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt.
  </div>
</body>

滚动进度栏隐藏文本内容

1 个答案: