html - 在两点之间滚动内容

标签 html css

我需要在两点之间垂直滚动侧边栏 div 及其内容(3 个链接)。我用过 position:fixed;顶部:100px。这工作得很好，它从顶部向下 100px 开始，并在用户向下滚动页面时垂直滚动。但是我如何让它在页脚之前停止呢？到目前为止，我有:

HTML

<div class="sidebar">
<div class="scroll">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>

CSS

.scroll {position: fixed; top: 450px;}

谢谢，

安迪;-)

好的，我添加了更多代码以更好地了解我所追求的目标。这是 JSFiddle:https://jsfiddle.net/mwt4x90d/

javascript 应该放在 HTML 文件的结束滚动 div 之前。但是，jsfiddle 希望将其分离出来。

我成功了，但我有两个问题。第一个是外部 div(边栏)折叠(只看到滚动 div 上方的一行。第二个是 div 没有停止在左框/分页上方，无论我在括号内使用了什么数字。我使用的是 Liquid 布局，所以这可能会产生影响。

如果有人能看出我做错了什么，那就太好了，我不懂 JavaScript，所以我只是按照你们在这里所说的去做。感谢您的帮助，安迪 ;-)

HTML

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Scrolling Sidebar</title>
        <link rel="stylesheet" type="text/css" media="screen" href="mainstyle.css">
        </head>
<body>
<div class="headerContents">
    <h1>Lorem Ipsum</h1>
</div>

<div class="leftM"></div>
    <div class="centerM">
        <a class="top"></a>
                <aside>
                    <div class="content">
                        <h2>Lorem Ipsum</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. </p>
                    </div>
                </aside>
                <aside>
                    <div class="content">
                        <h2>Lorem Ipsum</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. </p>
                    </div>
                </aside>
                <aside>
                    <div class="content">
                        <h2>Lorem Ipsum</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. </p>
                    </div>
                </aside>
    </div>
<div class="rightM"></div>

<div class="sidebar">
<div class="scroll">


    <h2>Lorem Ipsum</h2>
    <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    </ul>

<script type="text/javascript>
  var footP = 0;
  var scroller = document.getElementsByClassName("scroll");
  setInterval("if(document.body.scrollTop > (350) && footP == 0){scroller[0].style.position = 'absolute';scroller[0].style.top = document.body.scrollTop + 450;footP = 1;};",1);
  setInterval("if(document.body.scrollTop <= (350) && footP == 1){scroller[0].style.position = 'fixed';scroller[0].style.top = 450;footP = 0;};",1);
  </script>
</div>
</div>

<div class="cards">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.<p>

<p>Duis urna sapien, tristique non leo non, ultricies iaculis nibh. Sed posuere quis eros vitae vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas auctor sollicitudin condimentum. Pellentesque ipsum lacus, convallis sed nunc et, porta lacinia lectus. Nam vitae ante erat. Etiam elementum velit quis neque vehicula, quis blandit quam pulvinar. Vestibulum mollis pretium tortor porttitor accumsan. Proin nec semper nulla. Praesent mi augue, placerat vitae auctor vel, lobortis eget dolor. Donec eget mi augue. Maecenas eu augue cursus, maximus nisi eleifend, tempor lacus. Curabitur quis dolor vel urna venenatis pellentesque a nec est. Duis sit amet tempus dui. Integer egestas luctus efficitur. Etiam efficitur orci et ullamcorper pulvinar.<p>

Duis eleifend metus nibh, vel vulputate est mattis sit amet. In interdum fermentum lorem, in consectetur eros pretium bibendum. Curabitur turpis diam, molestie nec accumsan sed, scelerisque nec orci. Cras lobortis rutrum sem, vel viverra magna scelerisque ac. Phasellus convallis nunc quis consectetur congue. In vestibulum erat non tellus aliquam sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras quis rutrum augue, in faucibus nisi. Nulla bibendum ut massa vel eleifend. In nec ligula eget nisi ultricies eleifend. Aliquam ac finibus enim. Maecenas at lacus dictum, porta neque non, suscipit ex. Aenean sem nisl, pellentesque vel leo eget, volutpat condimentum odio. Curabitur sed dui nulla.
</div>
<div class="leftp">Duis eleifend metus nibh, vel vulputate est mattis sit amet. In interdum fermentum lorem, in consectetur eros pretium bibendum. </div>
<div class="pag snippetspag"> 
                    <ul class="pagination">
                      <li><a href="javascript:history.go(-1)">&laquo;</a></li>
                      <li><a class="active" href="../page1.php">1</a></li>
                      <li><a href="page2.php">2</a></li>
                      <li><a href="page3.php">3</a></li>
                      <li><a href="page4.php">4</a></li>
                      <li><a href="page5.php">5</a></li>
                      <li><a href="page6.php">6</a></li>
                      <li><a href="page7.php">7</a></li>
                      <li><a href="javascript:history.go(1)">&raquo;</a></li>
                    </ul>
          </div>
</div>

<div class="footer">
                <aside>
                    <div class="content">
                        <h2>Lorem Ipsum</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
                    </div>
                </aside>

                <aside>
                    <div class="content">
                        <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
                    </div>
                </aside>

                <aside>
                    <div class="content">
                        <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
                    </div>
                </aside>

                <aside>
                    <div class="content">
                        <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
                    </div>
                </aside>
</div>
<div class="copyright">
<p class="copyrightText">Lorem ipsum dolor sit amet <a href="index.php">Lorem Ipsum</a> 2016</p>
        </div>
</body>
</html>

CSS

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,300,700);
    body{
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        font-weight: 300;
        color: #3f3f3f;
        margin: 0;
        padding: 0;
        color: #000;
        background: #f4f3f2;}

    h1{font-size: 2.8em; font-weight: 700;} 
    h2{margin: 0 0 .5em 0; font-size: 1.4em; font-weight: 700; line-height: 1.1em;}
    h3{margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700;} 
    p{margin: 0 0 1em 0;}

    .headerContents{background-color: #3f3f3f; padding: 1em 2em; margin-bottom: 2em;}
    .leftM, .centerM, .rightM{
        float: left; 
        margin-bottom: 2em; 
        margin-left: 3%;}
    .centerM{background-color: #fff; border: 1px solid #dfdfdf;}
    .leftM{width: 9%;}
    .centerM{width: 68%;}
    .rightM{width: 9%;}
    .sidebar,.cards{
        float: left; 
        margin-bottom: 1em; 
        margin-left: 3%;}
    .sidebar {width: 21%; border: 1px solid #dfdfdf; background-color: #fff;}
    .scroll{position: fixed; height: 200px;}
    .cards {width: 70%;}
    .leftp, .pag{
        float:left;
        margin-bottom: 2em;
        margin-left: 3%;}
    .leftp{clear: both; width: 21.5%;}
    .pag{width: 69.5%; background-color: #fff; border: 1px solid #dfdfdf; padding: 1.5em 0;}
    .footer{
        clear: both;
        padding: 1.5em 1em; 
        background-color: #3f3f3f; 
        overflow: hidden;
        line-height: 1.5em; 
        border-top: 5px solid #ff0000;
        color: #fff;}
    .copyright{clear:both;}

    .headerContents h1{font-size: 3em; color: #fff;}
    .centerM aside{width: 33%; float: left; text-align: center;}
    .centerM .content{
        margin: 15px;
        background: no-repeat center top;
        background-size: 75px 75px;
        padding-top: 15px;}
    .centerM aside h2{text-decoration:none;}
    .centerM aside h2:hover{text-decoration: underline;}

    .snippetspag{
        text-align: center;}

    ul.pagination {
        display: inline-block;
        padding: 0;
        margin: 0;}

    ul.pagination li {display: inline;}

    ul.pagination li a {
        color: #3f3f3f;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        border-radius: 5px;}

    ul.pagination li a:hover {
        color: #ff0000;}

    ul.pagination li a.active {
        background-color: #ff0000;
        color: #fff;
        font-weight: bold;
        border-radius: 5px;}


    .footer aside .content{
        margin: 0 auto; 
        width: 22%; 
        float: left; 
        text-align: left; 
        margin-left: 3%;}
    .footer a:link, a:visited{color: #99cc00; text-decoration: none;}
    .footer a:hover, a:active{color: #cc9900;}  
    .copyright{
        text-align: center; 
        background-color: #3f3f3f; 
        padding: 1%; 
        border-bottom: 5px solid #ff0000;}
    .copyrightText{font-size:0.9em; color: #fff;}
    .copyrightText a:link, a:visited{color: #99cc00; text-decoration: none;}
    .copyrightText a:hover, a:active{color: #cc9900;}

最佳答案

只需将其插入到您的 HTML 的末尾:

  <script type="text/javascript>
  var footP = 0;
  var scroller = document.getElementsByClassName("scroll");
  setInterval("if(document.body.scrollTop > (ENTER FOOTER POSITION HERE) && footP == 0){scroller[0].style.position = 'absolute';scroller[0].style.top = document.body.scrollTop + 450;footP = 1;};",1);
  setInterval("if(document.body.scrollTop <= (ENTER FOOTER POSITION HERE) && footP == 1){scroller[0].style.position = 'fixed';scroller[0].style.top = 450;footP = 0;};",1);
  </script>

所以当它到达页脚位置时，这基本上改变了位置以保持原样。

请记住以标准数字格式输入页脚位置。

像 600。

不是 600 像素。

    <body>
    <div class="sidebar">
    <div class="scroll">
    <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    </ul>
    </div>
    </div>
    <div style="height:2500px">
    </div>
    <style>
    .scroll {
    position: fixed;
    top: 450px;
    }
    </style>

    <script>
    var footP = 0;
    var scroller = document.getElementsByClassName("scroll");
    setInterval("if(document.body.scrollTop > (600) && footP == 0){scroller[0].style.position = 'absolute';scroller[0].style.top = document.body.scrollTop + 450;footP = 1;};",1);
    setInterval("if(document.body.scrollTop <= (600) && footP == 1){scroller[0].style.position = 'fixed';scroller[0].style.top = 450;footP = 0;};",1);
    </script>
    </body>

这就是全部。

它可能不适用于 JSFiddle。只需将其复制到 Notepad++ HTML 文件中，然后根据需要进行编辑!

关于html - 在两点之间滚动内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38492101/

上一篇：css - 有没有办法退回到 CSS 中的非伪类样式？

下一篇：html - 在图像顶部显示溢出的 div

相关文章：

html - CSS HTML 页脚

python - django中的静态url路径设置

css - 覆盖引导类属性

html - 如何使垂直输入完全适合整个侧边导航栏？

html - 位置 :fixed does not work on android

html - 使用 angularJS 从用户输入的 CSS 和 HTML 创建预览

html - CSS 在较小屏幕上调整 DIV 大小

javascript - 单击菜单时制作模态弹出窗口

xml - 博客文章标签和类别的 HTML5 语义标记

javascript - 有没有一种方法可以从翻转区域触发多个弹出窗口？

©2024 IT工具网  联系我们