1

我正在实现无限滚动。一切正常，但是当我尝试向后滚动时，浮动条会跳到身体的顶部。我知道这是因为工作部分没有相对位置，但如果我添加它，则会出现另一个问题 - 浮动条跳到工作部分的底部（因为顶部偏移量是从工作部分顶部计算的，而不是主体)

示例：http: //jsfiddle.net/XC6Tz/3/

HTML：

<div id="wrapper">
    <section id="about">
         <h2>About Me</h2>

</div>
<section id="work">
    <!-- <div id="bar-wrap"> -->
    <div id="floating-bar">
         <h2>Floating bar</h2>

        <p id="echo1"></p>
    </div>
    <!-- </div> -->
    <div id="work-prieview">
         <h2>Work preview</h2>

    </div>
    <div id="works">
         <h2>Works</h2>

        <p id="echo2"></p>
    </div>
    </div>
    <section id="contact">
         <h2>Contact Me</h2>

        </div>
        </div>

CSS

    /* GLOBAL */

    /* -------------------------------------------------------------- */
     html, body, div, span, img, ul, li, h1, h2, h3, h4, h5, h6, p, a, hr, form, label, input, textarea, button, header, footer, nav, section {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    header, footer, nav, section {
        display: block;
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }
    body {
        font: 14px"Helvetica Neue", Helvetica, Arial, Sans-Serif;
        color: #FFFFFF;
    }
    section h2 {
        font-size: 54px;
        padding: 50px 0 0 50px;
    }
    section p {
        font-size: 30px;
        margin: 0 0 50px 50px;
    }
    /* CONTENT */

    /* -------------------------------------------------------------- */
     #about {
        height: 800px;
        background-color: #0054a6;
    }
    #work {
    }
    #bar-wrap {
        position: absolute;
        width: 100%;
    }
    #floating-bar {
        position: absolute;
        width: 100%;
        height: 180px;
        background: #00a651;
    }
    #work-prieview {
        padding-top: 180px;
        height: 1600px;
        background-color: #ed1c24;
    }
    #works {
        height: 800px;
        background: #0054a6;
    }
    #contact {
        height: 1600px;
        background: #ed1c24;
    }

Javascript

   $(document).ready(function () {

       var top = $('#floating-bar').offset().top;
       var bottom = $('#works').offset().top - 180;

       $(window).scroll(function () {

           y = $(window).scrollTop();

           $('#echo1').text(y);

           if (y > top) {
               $('#floating-bar').css({
                   position: 'fixed',
                   top: 0
               });

               if (y > bottom) {
                   $('#floating-bar').css({
                       position: 'absolute',
                       top: $('#works').offset().top - 180
                   });
               }

           } else {
               $('#floating-bar').css({
                   position: 'absolute',
                   // top: 0
               });
           }

       });

       $('#echo2').text(bottom);

   });
4

0 回答 0