在两点之间滚动内容

时间：2016-07-20 22:46:01

标签： html css

我需要滚动一个侧边栏div，它是两个点之间垂直的内容（3个链接）。我用位置：固定;顶部：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不会停在Left Box / Pagination上方无论如何我在括号内使用了什么数字。我正在使用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;}

1 个答案:

答案 0 :(得分：1)

只需将其插入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>

因此，当它到达页脚位置时，它基本上会改变位置。

请记住以标准数字表格输入FOLTER位置。

喜欢600.

不是600px。

    <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文件中即可编辑所需内容！

相关问题
最新问题