Question

精彩的助手！

我正在尝试创建一个时间轴元素，根据滚动位置为#marker上的CSS width属性设置动画。我是jQuery的新手，我知道我可能有一些错误...抱歉。从好的方面来说，我确实提出了有用的评论来解释我正在尝试做什么。请看一下，并提前致谢！

    <!DOCTYPE html>
        <head>
            <!-- CSS Styles Link -->
            <link rel='stylesheet' type='text/css' href='styles.css'>
            <!-- jQuery Library Link -->
            <script type='text/javascript' src='jquery-awesomeness.js'></script>



            <script>
            var marker = $('#marker')                   // Converts CSS #marker into a jQuery variable named $marker
            var height = $(window).scrollTop();         // Uses jQuery scrollTop method to detect scroll position and                                                   sets it as a variable named height


        // Jquery for Timeline
        $(document).ready(function(){               //Prevents jQuery from performing instructions until after the                                                  page has loaded
            if(height  > height + 100 ) {           // Creates a conditional statement - if the scroll position                                                 increases by 100, do the following instructions
                marker.css('width', +10%            // Increase CSS width setting on #marker by 10%. 
            });                                     // Closes first conditional statement

            else if (height  < height + 100 ) {     // Creates another conditional statement - if the scroll                                                    position increases by 100, do the following instructions
                marker.css('width', -10%            // Decrease CSS width setting on #marker by 10%
            });                                     // Closes second conditional statement
        });                                         // Closes document dot ready function
        </script>

    </head>




    <body>
        <!-- HTML Code for Timeline elements -->
        <div id='timeline'> <!-- Timeline's main container -->
            <div id='path'></div><!-- Timeline's inner path -->
            <div id='marker'></div><!-- Timeline's animatable marker -->
        </div>

        <div id='content1'>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dolor turpis, consectetur vel libero a, mollis dapibus odio. Nunc lobortis, eros non tincidunt porttitor, purus tellus porta lectus, non luctus arcu augue eu est. Nunc malesuada ex elit, vel bibendum erat dictum nec. Proin imperdiet efficitur elit eu vestibulum. Nullam id augue tincidunt, efficitur nunc non, efficitur urna. Proin sit amet tincidunt purus. Sed interdum, felis quis facilisis malesuada, felis felis viverra lectus, eget euismod elit risus et mi. Mauris eu enim tellus. Aenean tincidunt orci nec tincidunt facilisis. Phasellus dignissim ante ut maximus feugiat. Mauris sollicitudin venenatis neque nec luctus. Quisque vel tempus urna, sed feugiat leo. Sed tellus magna, molestie non purus in, viverra condimentum orci. Nulla a nunc mauris. Aliquam convallis interdum velit, ac luctus massa rutrum at.

                Sed volutpat purus enim, eget accumsan odio ullamcorper sit amet. Sed vitae imperdiet metus. Aenean mollis mauris odio, eget finibus ligula ornare eu. Aliquam id velit quis tellus cursus imperdiet. Mauris eget laoreet ipsum, sed ultricies magna. Aliquam vel neque ut risus dapibus suscipit nec nec ipsum. Nullam vulputate, elit sit amet finibus sagittis, nunc nisl molestie sem, et tincidunt neque magna in nunc. Nullam aliquam mi et ante dapibus posuere. Vivamus aliquet ipsum sit amet tellus lacinia, vitae convallis odio aliquam. Mauris rhoncus, leo sit amet vulputate placerat, sem tortor fermentum ex, quis luctus nulla sapien consequat nunc.

                Phasellus a pellentesque urna. Integer eget mattis nulla. Nullam sed diam ipsum. Fusce interdum scelerisque arcu, quis ultricies risus accumsan vel. Quisque luctus nisi a nisl porttitor, at finibus elit porttitor. Fusce eget mauris a magna sollicitudin volutpat. Sed nisl magna, volutpat quis mauris a, sagittis mollis nibh. Ut consectetur justo et sem convallis, at elementum purus hendrerit. Curabitur eros odio, ullamcorper vitae facilisis vel, congue sed mauris. Aliquam egestas augue nec scelerisque ornare. Integer et neque metus. Suspendisse aliquet scelerisque odio et ornare. Donec ac mi sed nunc interdum aliquet nec at lectus. Praesent eu tortor pretium, euismod tellus ut, scelerisque massa. Nullam eleifend malesuada magna rutrum gravida.

                Phasellus ultricies elit ac turpis consequat, a suscipit tellus cursus. Aenean in consectetur turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dui non ipsum pretium sagittis. Donec dictum, enim sit amet venenatis venenatis, ante purus malesuada neque, ac pellentesque eros turpis eu velit. Vestibulum ligula leo, aliquet et dignissim et, dapibus nec orci. Nullam ultrices sapien id imperdiet aliquam. Vestibulum id lorem finibus, condimentum magna mollis, interdum magna. Sed vel lorem feugiat, aliquam mauris non, consequat ante. Nunc eu sem et dui porta auctor. Nam tincidunt orci sed egestas tempor. Suspendisse euismod, arcu vitae porta sollicitudin, justo erat porta sem, vel suscipit odio lorem sit amet mi. Maecenas quis finibus elit.

                Praesent eu ante eu est rutrum suscipit. Maecenas dictum massa eros, blandit fermentum dui ultrices et. Duis in orci eget nulla tincidunt rhoncus at et purus. Nunc porta ipsum vitae lacinia ornare. Vivamus laoreet odio quis urna porta blandit. In viverra molestie ornare. Nam lorem turpis, lacinia at lacus non, pharetra efficitur ipsum. Donec ultrices lacinia velit id eleifend. Integer pellentesque lectus tincidunt est porta, et elementum ex euismod. Vivamus lobortis at odio at interdum. Vestibulum posuere quam dolor, at rhoncus elit cursus nec. Proin mollis tincidunt libero quis convallis. Donec vel placerat dui, at cursus urna. Donec cursus eleifend dapibus.
            </p>
        </div>
    </body>

</html>

CSS：

#timeline {
    width: 98%;
    height: 1%;
    margin: 1%;
    padding-top: 1%;
    padding-bottom: 1%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #590C13;
    border-radius: .5em;
    }

#path {
    width: 98%;
    position: fixed;
    border-top: 3px solid #424343;
    }

#marker {
    width: 0%; /* This is defaulted to zero. jQuery resets value based on scroll position. Don't mess with it! */
    position: relative;
    top: 0;
    border-top: 3px solid #ffffff;
    }

p { /* This is place holder content used to test jQuery scroll position. Feel free to delete.  */
    padding: 3%;
    font-size: 2em;
    line-height: 3em;
    }

Answer 1

我已经重新设置了CSS，并且还编写了在滚动或调整视口大小时更新标记宽度的逻辑。 CSS主要涉及将#marker和#path更改为绝对定位而不是固定：

#path {
    width: 100%;
    position: absolute;
    border-top: 3px solid #424343;
}
#marker {
    width: 0;
    absolute;
    border-top: 3px solid #ffffff;
}

对于计算，诀窍如下：

计算可滚动距离，基本上是内容的高度减去视口高度
从顶部获取视口的位置
使用此选项计算用户滚动的百分比
将此百分比/分数乘以路径的宽度
瞧！：D

现在这里是jQuery中的逻辑。我选择在名为updateMarker()的函数中进行计算，因此我们可以在视口大小更改时或用户滚动时调用它。您还应该将其称为onload（如果用户没有从页面顶部开始）。

$(function() {
    var updateMarker = function() {
        // Update measurements
        var viewportHeight = $(window).height(),
            contentHeight = $('#content1').height(),
            pathWidth = $('#path').width(),
            scrollPosition = $(window).scrollTop();

        // Update #marker dimensions
        $('#marker').width(scrollPosition/(contentHeight-viewportHeight)*pathWidth);
    }

    // Call function when viewport is resized or scrolled    
    $(window).on('scroll resize', updateMarker);

    // Call function on DOM ready
    updateMarker();
});

请参阅此处的小提琴：http://jsfiddle.net/teddyrised/e0ezfw6w/

ps：在旁注中，您可能需要consider use the <progress> element，这在语义上比<div>更具相关性;）

使用scrollTop（）为时间轴添加动画css

1 个答案: