Javascript 向下滚动时隐藏的粘性标题+固定进度条_Javascript_Css

Javascript 向下滚动时隐藏的粘性标题+固定进度条

javascript css

Javascript 向下滚动时隐藏的粘性标题+固定进度条,javascript,css,Javascript,Css,尝试创建标题+进度条，如下所示：需要一个粘性固定标题，它只在你向上滚动时显示，向下滚动时隐藏。标题下方始终固定有一个进度条。当你向上滚动并且蓝色标题被隐藏时，进度条应该仍然显示…就像blog.fullstory.com一样代码段： //向下滚动时隐藏标题，向上滚动时显示标题卷轴； var lastScrollTop=0； varδ=5； var navbarHeight=$'header'.outerHeight； $window.scrollfunctionevent{ did

尝试创建标题+进度条，如下所示：

需要一个粘性固定标题，它只在你向上滚动时显示，向下滚动时隐藏。标题下方始终固定有一个进度条。当你向上滚动并且蓝色标题被隐藏时，进度条应该仍然显示…就像blog.fullstory.com一样

代码段：

//向下滚动时隐藏标题，向上滚动时显示标题卷轴； var lastScrollTop=0； varδ=5； var navbarHeight=$'header'.outerHeight； $window.scrollfunctionevent{ didcoll=true； }; 设置间隔函数{ 如果没有滚动{ 胡言乱语； didcoll=false； } }, 250; 功能混乱{ var st=$this.scrollTop； //确保它们滚动的次数大于增量 ifMath.abslastScrollTop-st lastScrollTop&&st>navbarHeight{ //向下滚动 $'header'。删除类'nav-down'。添加类'nav-up'； }否则{ //向上滚动 ifst+$window.height<$document.height{ $'header'。删除类'nav-up'。添加类'nav-down'； } } lastScrollTop=st； } 身体{ /*这是为了给顶部导航/收割台留出空间*/ 填充顶部：60px；溢出x：隐藏； } 标题{ 位置：固定；排名：0；过渡：前0.8秒缓进缓出；宽度：100%；背景：蓝色；高度：30px； } /*平滑位置指示器*/ .滚动进度条{ 位置：固定；排名：0；高度：3倍；宽度：0；背景：绿色；颜色：绿色； z指数：2； } .导航{ /*向下滚动时隐藏顶部导航*/ 顶部：-300px； }

这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试你可以用纯JavaScript来做，不需要jQuery

您可以填充内容并具有任意高度。使用JavaScript可以计算顶部元素的高度

由于进度条位于顶部之外，因此可以将顶部移动到-Height，并且进度条仍在视图中

var-lastpos=0； document.addEventListener'scroll'函数{ 让pos=document.documentElement.scrollTop | | document.body.scrollTop；设windowHeight=document.documentElement.clientHeight | | window.innerHeight；设sHeight=document.documentElement.scrollHeight；设pWidth=pos/sheigh窗高*100；让top=document.getElementById'top'；让percent=document.getElementById'percent'；

如果pos>top.clientHeight&&pos>=sHeight-windowHeight-100 | | | lastpos您可以使用纯JavaScript来完成，无需jQuery

您可以填充内容并具有任意高度。使用JavaScript，您可以计算顶部元素的高度

由于进度条位于顶部之外，因此可以将顶部移动到-Height，并且进度条仍在视图中

如果pos>top.clientHeight&&pos>=sHeight-windowHeight-100 | | | lastpos我必须从头开始删除JQuery以使其更具可读性，请随意使用此代码或其部分。如果愿意，您可以随时再次添加JQuery

这里正在进行现场测试

到目前为止，这个概念在Firefox、Safari和Chrome上都可以使用。在iPhone和iPad上也可以使用。期待着听到你们对Android设备的使用情况

带有进度条文档的粘性标题收割台包装{ 位置：固定；保证金：0；顶部：0px；左：0；背景颜色：蓝色；最小高度：80px；宽度：100%；过渡：前666ms； } 标题内容{ 保证金：0；填充：10px；背景颜色：浅蓝色；最小高度：75px；框大小：边框框； } 标题进度{ 填充：0px；框大小：边框框；背景色：红色；高度：5px；宽度：0%；溢出：隐藏；过渡：宽度333ms线性； } 页面内容{ 边缘顶部：80px；填充物：5px；框大小：边框框；背景色：白色；宽度：100%；溢出：滚动； } 标题bla bla bla。。正文1 这是一个测试这是一个测试这是一个测试这是一个测试这是一个测验这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试正文文本2 这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试正文3 这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试 window.prevOffset=0； var=0； const smartScrollHeader=document.getElementById'header-wrap'； const smartProgressBar=document.getElementById'header-progress'； const smartScrollPage=document.getElementById'page-content'； var smartScroll=函数{ ifnew Date.getTime-smartScrollThrottle窗口。prevOffset+25 | | tempOffset<100{ //从80像素中隐藏75像素 smartScrollHeader.style.top='-75px'； } iftempOffset我必须从头开始，删除JQuery以使其更具可读性，可以随意使用此代码或其部分。如果愿意，可以随时再次添加JQuery

这里正在进行现场测试

到目前为止，这一概念在Firefox、Safari和Chrome中都适用。也适用于iPhone和iPad。期待着听到你们的消息，它在Android设备上做了什么

带有进度条文档的粘性标题收割台包装{ 位置：固定；保证金：0；顶部：0px；左：0；背景颜色：蓝色；最小高度：80px；宽度：100%；过渡：前666ms； } 标题内容{ 保证金：0；填充：10px；背景颜色：浅蓝色；最小高度：75px；框大小：边框框； } 标题进度{ 填充：0px；框大小：边框框；背景色：红色；高度：5px；宽度：0%；溢出：隐藏；过渡：宽度333ms线性； } 页面内容{ 边缘顶部：80px；填充物：5px；框大小：边框框；背景色：白色；宽度：100%；溢出：滚动； } 标题bla bla bla。。正文1 这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试正文文本2 这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试正文3 这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试 window.prevOffset=0； var=0； const smartScrollHeader=document.getElementById'header-wrap'； const smartProgressBar=document.getElementById'header-progress'； const smartScrollPage=document.getElementById'page-content'； var smartScroll=函数{ ifnew Date.getTime-smartScrollThrottle窗口。prevOffset+25 | | tempOffset<100{ //从80像素中隐藏75像素 smartScrollHeader.style.top='-75px'； } iftempOffset基于@ICE的答案，这在跨浏览器中起作用：

    var lastpos = 0;
    document.addEventListener('scroll',function() {
      let pos = document.documentElement.scrollTop || document.body.scrollTop; // use window.pageYOffset?
      let windowHeight = document.documentElement.clientHeight || window.innerHeight;
      let sHeight = document.documentElement.scrollHeight;
      let maxScrollHeight = sHeight-windowHeight;
      if (pos >= maxScrollHeight) {
        pos = maxScrollHeight;
      }
      let pWidth = ((pos/maxScrollHeight)*100);

      let top = document.getElementById('top');
      let percent = document.getElementById('percent');

      if (pos>top.clientHeight && lastpos<=pos) {
        top.style.top = (-top.clientHeight)+'px';
      } else {
        top.style.top = 0;
      }
      percent.style.width = Math.ceil(pWidth)+'%';
      lastpos = pos;

    },true);

基于@ICE的答案，这在跨浏览器中起作用：

    var lastpos = 0;
    document.addEventListener('scroll',function() {
      let pos = document.documentElement.scrollTop || document.body.scrollTop; // use window.pageYOffset?
      let windowHeight = document.documentElement.clientHeight || window.innerHeight;
      let sHeight = document.documentElement.scrollHeight;
      let maxScrollHeight = sHeight-windowHeight;
      if (pos >= maxScrollHeight) {
        pos = maxScrollHeight;
      }
      let pWidth = ((pos/maxScrollHeight)*100);

      let top = document.getElementById('top');
      let percent = document.getElementById('percent');

      if (pos>top.clientHeight && lastpos<=pos) {
        top.style.top = (-top.clientHeight)+'px';
      } else {
        top.style.top = 0;
      }
      percent.style.width = Math.ceil(pWidth)+'%';
      lastpos = pos;

    },true);

它看起来在Chrome 74，Mac OS上很好。考虑在你的问题中添加一个可运行的。这会让别人更容易帮助你。如果不添加一个并建议答案应该包含一个，可能会被认为是不合适的，如果不是不尊重的话。@AndreiGheorghiu我已经用一个最小的可重复的例子更新了描述。想法？我可以帮你做进度条。通过将进度条放在标题内，但使标题不完全消失，只留下较低的像素可见。这样，您将得到与示例类似的结果。我很快会添加一些代码作为答案。最后，我花了比预期更多的时间，这一切都与节流和不同浏览器中不同的不太准确的结果有关。你的问题也让我学到了一些新东西。如果我的答案是你的最终答案，那么请标记它✅. 所以其他想法相同的人可以回答这个问题。它看起来对Chrome 74，Mac OS很好。考虑在你的问题中添加一个可运行的。这会让别人更容易帮助你。如果不添加一个并建议答案应该包含一个，可能会被认为是不合适的，如果不是不尊重的话。@AndreiGheorghiu我已经用一个最小的可重复的例子更新了描述。想法？我可以帮你做进度条。通过将进度条放在标题内，但使标题不完全消失，只留下较低的像素可见。这样，您将得到与示例类似的结果。我很快会添加一些代码作为答案。最后，我花了比预期更多的时间，这一切都与节流和不同浏览器中不同的不太准确的结果有关。你的问题也让我学到了一些新东西。如果我的答案是你的最终答案，那么请标记它✅. 所以其他有相同想法的人可以看到这个问题得到了回答。这个标题的UX的全部要点是：它总是可以通过向上滚动一点来实现，但你可以通过向下滚动来隐藏它，以获得额外的屏幕空间。您似乎错过了它。@ICE惊人，这非常有效……而且，您还为我删除了jQuery！非常感谢。@ICE Chrome看起来很棒，但我刚刚注意到这在Safari上根本不起作用……进度条没有显示出来。有什么想法吗？我注意到你在下面2x2p的解决方案中提到了Safari…这对你在Safari上有用吗？@ICE谢谢，但Safari的控制台没有错误。@ICE查看我刚刚发布的最后一个答案，这建立在你不需要变量的基础上…在Safari中也可以使用。该标题的UX的全部要点是：它总是可以通过向上滚动一点来实现，但你可以通过向下滚动来隐藏它，以获得额外的屏幕空间。你看起来

错过了它。@ICE，太棒了，这很好用……而且，你还帮我删除了jQuery！非常感谢。@ICE Chrome看起来很棒，但我刚刚注意到这在Safari上根本不起作用……进度条没有显示出来。有什么想法吗？我注意到你在下面2x2p的解决方案中提到了Safari…这对你在Safari上有用吗？@ICE谢谢，但Safari的控制台没有错误。@ICE查看我刚刚发布的最后一个答案，这建立在你不需要变量的基础上…在Safari中也可以使用。iPad上的Mobile Safari 12在滚动页面的绝对底部不知何故再次显示标题。这实际上是一个很好的特性，但并非最初的目的：-我相信，如果您将ID页面内容的DIV设置为固定元素，高度设置为视口的高度，并在DIV的内部HTML上滚动，而不是在整个页面上滚动，我们可以获得更一致的结果。这需要对documentElement.scrollHeight-documentElement.clientHeight代码进行完整的修订。Chrome和Firefox中的问题并非来自错误的数学，而是由于到达终点时取消最后一个事件的节流阀造成的。@ICE它现在已全部修复，并且在Chrome、Firefox和Safari中运行平稳。如果您发现其他bug，请告诉我。谢谢您！这与ICE的解决方案非常相似……尽管你的解决方案似乎也适用于Safari。向上投票：iPad上的Mobile Safari 12在滚动页面的绝对底部以某种方式再次显示标题。这实际上是一个很好的特性，但并非最初的目的：-我相信，如果您将ID页面内容的DIV设置为固定元素，高度设置为视口的高度，并在DIV的内部HTML上滚动，而不是在整个页面上滚动，我们可以获得更一致的结果。这需要对documentElement.scrollHeight-documentElement.clientHeight代码进行完整的修订。Chrome和Firefox中的问题并非来自错误的数学，而是由于到达终点时取消最后一个事件的节流阀造成的。@ICE它现在已全部修复，并且在Chrome、Firefox和Safari中运行平稳。如果您发现其他bug，请告诉我。谢谢您！这与ICE的解决方案非常相似……尽管你的解决方案似乎也适用于Safari。向上投票：